loading-hc.svg 1.1 KB

12345678910111213141516171819202122232425262728293031
  1. <?xml version='1.0' standalone='no' ?>
  2. <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
  3. <style>
  4. circle {
  5. animation: ball 0.6s linear infinite;
  6. }
  7. circle:nth-child(2) { animation-delay: 0.075s; }
  8. circle:nth-child(3) { animation-delay: 0.15s; }
  9. circle:nth-child(4) { animation-delay: 0.225s; }
  10. circle:nth-child(5) { animation-delay: 0.3s; }
  11. circle:nth-child(6) { animation-delay: 0.375s; }
  12. circle:nth-child(7) { animation-delay: 0.45s; }
  13. circle:nth-child(8) { animation-delay: 0.525s; }
  14. @keyframes ball {
  15. from { opacity: 1; }
  16. to { opacity: 0.3; }
  17. }
  18. </style>
  19. <g style="fill:white;">
  20. <circle cx='5' cy='1' r='1' style='opacity:0.3;' />
  21. <circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
  22. <circle cx='9' cy='5' r='1' style='opacity:0.3;' />
  23. <circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
  24. <circle cx='5' cy='9' r='1' style='opacity:0.3;' />
  25. <circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
  26. <circle cx='1' cy='5' r='1' style='opacity:0.3;' />
  27. <circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
  28. </g>
  29. </svg>