loading7.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. .lds-default {
  2. display: inline-block;
  3. position: relative;
  4. width: 64px;
  5. height: 64px;
  6. }
  7. .lds-default view {
  8. position: absolute;
  9. width: 5px;
  10. height: 5px;
  11. background: #42b983;//可修改颜色
  12. border-radius: 50%;
  13. animation: lds-default 1.2s linear infinite;
  14. }
  15. .lds-default view:nth-child(1) {
  16. animation-delay: 0s;
  17. top: 29px;
  18. left: 53px;
  19. }
  20. .lds-default view:nth-child(2) {
  21. animation-delay: -0.1s;
  22. top: 18px;
  23. left: 50px;
  24. }
  25. .lds-default view:nth-child(3) {
  26. animation-delay: -0.2s;
  27. top: 9px;
  28. left: 41px;
  29. }
  30. .lds-default view:nth-child(4) {
  31. animation-delay: -0.3s;
  32. top: 6px;
  33. left: 29px;
  34. }
  35. .lds-default view:nth-child(5) {
  36. animation-delay: -0.4s;
  37. top: 9px;
  38. left: 18px;
  39. }
  40. .lds-default view:nth-child(6) {
  41. animation-delay: -0.5s;
  42. top: 18px;
  43. left: 9px;
  44. }
  45. .lds-default view:nth-child(7) {
  46. animation-delay: -0.6s;
  47. top: 29px;
  48. left: 6px;
  49. }
  50. .lds-default view:nth-child(8) {
  51. animation-delay: -0.7s;
  52. top: 41px;
  53. left: 9px;
  54. }
  55. .lds-default view:nth-child(9) {
  56. animation-delay: -0.8s;
  57. top: 50px;
  58. left: 18px;
  59. }
  60. .lds-default view:nth-child(10) {
  61. animation-delay: -0.9s;
  62. top: 53px;
  63. left: 29px;
  64. }
  65. .lds-default view:nth-child(11) {
  66. animation-delay: -1s;
  67. top: 50px;
  68. left: 41px;
  69. }
  70. .lds-default view:nth-child(12) {
  71. animation-delay: -1.1s;
  72. top: 41px;
  73. left: 50px;
  74. }
  75. @keyframes lds-default {
  76. 0%, 20%, 80%, 100% {
  77. transform: scale(1);
  78. }
  79. 50% {
  80. transform: scale(1.5);
  81. }
  82. }