loading.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. .lds-grid {
  2. position: inherit;
  3. width: 80px;
  4. height: 80px;
  5. }
  6. .lds-grid div {
  7. position: absolute;
  8. width: 16px;
  9. height: 16px;
  10. border-radius: 50%;
  11. background: #737374;
  12. animation: lds-grid 1.2s linear infinite;
  13. }
  14. .lds-grid div:nth-child(1) {
  15. top: 8px;
  16. left: 8px;
  17. animation-delay: 0s;
  18. }
  19. .lds-grid div:nth-child(2) {
  20. top: 8px;
  21. left: 32px;
  22. animation-delay: -0.4s;
  23. }
  24. .lds-grid div:nth-child(3) {
  25. top: 8px;
  26. left: 56px;
  27. animation-delay: -0.8s;
  28. }
  29. .lds-grid div:nth-child(4) {
  30. top: 32px;
  31. left: 8px;
  32. animation-delay: -0.4s;
  33. }
  34. .lds-grid div:nth-child(5) {
  35. top: 32px;
  36. left: 32px;
  37. animation-delay: -0.8s;
  38. }
  39. .lds-grid div:nth-child(6) {
  40. top: 32px;
  41. left: 56px;
  42. animation-delay: -1.2s;
  43. }
  44. .lds-grid div:nth-child(7) {
  45. top: 56px;
  46. left: 8px;
  47. animation-delay: -0.8s;
  48. }
  49. .lds-grid div:nth-child(8) {
  50. top: 56px;
  51. left: 32px;
  52. animation-delay: -1.2s;
  53. }
  54. .lds-grid div:nth-child(9) {
  55. top: 56px;
  56. left: 56px;
  57. animation-delay: -1.6s;
  58. }
  59. @keyframes lds-grid {
  60. 0%, 100% {
  61. opacity: 1;
  62. }
  63. 50% {
  64. opacity: 0.5;
  65. }
  66. }