Skip to content

Instantly share code, notes, and snippets.

@desandro

desandro/loader-dots.svg

Last active March 30, 2024 21:30
Show Gist options
  • Save desandro/8224416 to your computer and use it in GitHub Desktop.
Save desandro/8224416 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
loader-dots.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- hand coded by David DeSandro like a bad ass luddite -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="80px" height="20px" viewBox="0 0 80 20">
<circle cx="10" cy="10" r="10" fill="#333" >
<animate attributeName="cx" from="10" to="40" dur="0.5s" calcMode="spline" keySplines="0.42 0 0.58 1" keyTimes="0;1" repeatCount="indefinite" />
</circle>
<circle cx="10" cy="10" r="0" fill="#333">
<animate attributeName="r" from="0" to="10" dur="0.5s" calcMode="spline" keySplines="0.42 0 0.58 1" keyTimes="0;1" repeatCount="indefinite" />
</circle>
<circle cx="40" cy="10" r="10" fill="#333">
<animate attributeName="cx" from="40" to="70" dur="0.5s" calcMode="spline" keySplines="0.42 0 0.58 1" keyTimes="0;1" repeatCount="indefinite" />
</circle>
<circle cx="70" cy="10" r="10" fill="#333">
<animate attributeName="r" from="10" to="0" dur="0.5s" calcMode="spline" keySplines="0.42 0 0.58 1" keyTimes="0;1" repeatCount="indefinite" />
</circle>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment