three-dots.svg 1.5 KB

123456789101112131415161718192021222324252627282930313233
  1. <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
  2. <svg width="30" height="14" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#fff">
  3. <circle cx="15" cy="15" r="15" fill="var(--primary, red)">
  4. <animate attributeName="r" from="15" to="15"
  5. begin="0s" dur="0.8s"
  6. values="15;9;15" calcMode="linear"
  7. repeatCount="indefinite" />
  8. <animate attributeName="fill-opacity" from="1" to="1"
  9. begin="0s" dur="0.8s"
  10. values="1;.5;1" calcMode="linear"
  11. repeatCount="indefinite" />
  12. </circle>
  13. <circle cx="60" cy="15" r="9" fill-opacity="0.3" fill="var(--primary, red)">
  14. <animate attributeName="r" from="9" to="9"
  15. begin="0s" dur="0.8s"
  16. values="9;15;9" calcMode="linear"
  17. repeatCount="indefinite" />
  18. <animate attributeName="fill-opacity" from="0.5" to="0.5"
  19. begin="0s" dur="0.8s"
  20. values=".5;1;.5" calcMode="linear"
  21. repeatCount="indefinite" />
  22. </circle>
  23. <circle cx="105" cy="15" r="15" fill="var(--primary, red)">
  24. <animate attributeName="r" from="15" to="15"
  25. begin="0s" dur="0.8s"
  26. values="15;9;15" calcMode="linear"
  27. repeatCount="indefinite" />
  28. <animate attributeName="fill-opacity" from="1" to="1"
  29. begin="0s" dur="0.8s"
  30. values="1;.5;1" calcMode="linear"
  31. repeatCount="indefinite" />
  32. </circle>
  33. </svg>