Skip to content

Instantly share code, notes, and snippets.

@juliendargelos

juliendargelos/spinner.svg

Created June 20, 2019 12:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save juliendargelos/26082084086d6d0f733986cffb1ee9d8 to your computer and use it in GitHub Desktop.
Save juliendargelos/26082084086d6d0f733986cffb1ee9d8 to your computer and use it in GitHub Desktop.
Download ZIP
Basic animated svg spinner
Display the source blob
Display the rendered blob
Raw
spinner.svg
<svg width="64px" height="64px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<rect x="0" y="0" width="100" height="100" fill="none"></rect>
<circle cx="50" cy="50" r="40" stroke="none" fill="none" stroke-width="10" stroke-linecap="round"></circle>
<circle cx="50" cy="50" r="40" stroke="#000" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="1.5s" repeatCount="indefinite" from="0" to="502"></animate>
<animate attributeName="stroke-dasharray" dur="1.5s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate>
</circle>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment