ball-spin-fade-loader.css 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. @keyframes ball-spin-fade-loader {
  2. 50% {
  3. opacity: 0.3;
  4. transform: scale(0.4); }
  5. 100% {
  6. opacity: 1;
  7. transform: scale(1); } }
  8. .ball-spin-fade-loader {
  9. position: relative;
  10. top: -10px;
  11. left: -10px; }
  12. .ball-spin-fade-loader > div:nth-child(1) {
  13. top: 25px;
  14. left: 0;
  15. animation: ball-spin-fade-loader 1s -0.96s infinite linear; }
  16. .ball-spin-fade-loader > div:nth-child(2) {
  17. top: 17.04545px;
  18. left: 17.04545px;
  19. animation: ball-spin-fade-loader 1s -0.84s infinite linear; }
  20. .ball-spin-fade-loader > div:nth-child(3) {
  21. top: 0;
  22. left: 25px;
  23. animation: ball-spin-fade-loader 1s -0.72s infinite linear; }
  24. .ball-spin-fade-loader > div:nth-child(4) {
  25. top: -17.04545px;
  26. left: 17.04545px;
  27. animation: ball-spin-fade-loader 1s -0.6s infinite linear; }
  28. .ball-spin-fade-loader > div:nth-child(5) {
  29. top: -25px;
  30. left: 0;
  31. animation: ball-spin-fade-loader 1s -0.48s infinite linear; }
  32. .ball-spin-fade-loader > div:nth-child(6) {
  33. top: -17.04545px;
  34. left: -17.04545px;
  35. animation: ball-spin-fade-loader 1s -0.36s infinite linear; }
  36. .ball-spin-fade-loader > div:nth-child(7) {
  37. top: 0;
  38. left: -25px;
  39. animation: ball-spin-fade-loader 1s -0.24s infinite linear; }
  40. .ball-spin-fade-loader > div:nth-child(8) {
  41. top: 17.04545px;
  42. left: -17.04545px;
  43. animation: ball-spin-fade-loader 1s -0.12s infinite linear; }
  44. .ball-spin-fade-loader > div {
  45. background-color: #55595c;
  46. width: 15px;
  47. height: 15px;
  48. border-radius: 100%;
  49. margin: 2px;
  50. animation-fill-mode: both;
  51. position: absolute; }