ball-spin-loader.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. @keyframes ball-spin-loader {
  2. 75% {
  3. opacity: 0.2; }
  4. 100% {
  5. opacity: 1; } }
  6. .ball-spin-loader {
  7. position: relative; }
  8. .ball-spin-loader > span:nth-child(1) {
  9. top: 45px;
  10. left: 0;
  11. animation: ball-spin-loader 2s 0.9s infinite linear; }
  12. .ball-spin-loader > span:nth-child(2) {
  13. top: 30.68182px;
  14. left: 30.68182px;
  15. animation: ball-spin-loader 2s 1.8s infinite linear; }
  16. .ball-spin-loader > span:nth-child(3) {
  17. top: 0;
  18. left: 45px;
  19. animation: ball-spin-loader 2s 2.7s infinite linear; }
  20. .ball-spin-loader > span:nth-child(4) {
  21. top: -30.68182px;
  22. left: 30.68182px;
  23. animation: ball-spin-loader 2s 3.6s infinite linear; }
  24. .ball-spin-loader > span:nth-child(5) {
  25. top: -45px;
  26. left: 0;
  27. animation: ball-spin-loader 2s 4.5s infinite linear; }
  28. .ball-spin-loader > span:nth-child(6) {
  29. top: -30.68182px;
  30. left: -30.68182px;
  31. animation: ball-spin-loader 2s 5.4s infinite linear; }
  32. .ball-spin-loader > span:nth-child(7) {
  33. top: 0;
  34. left: -45px;
  35. animation: ball-spin-loader 2s 6.3s infinite linear; }
  36. .ball-spin-loader > span:nth-child(8) {
  37. top: 30.68182px;
  38. left: -30.68182px;
  39. animation: ball-spin-loader 2s 7.2s infinite linear; }
  40. .ball-spin-loader > div {
  41. animation-fill-mode: both;
  42. position: absolute;
  43. width: 15px;
  44. height: 15px;
  45. border-radius: 100%;
  46. background: green; }