lds-grid.css 1.2 KB

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