Skip to content

Instantly share code, notes, and snippets.

@TheDutchCoder

TheDutchCoder/loader.svg

Last active June 23, 2021 18:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TheDutchCoder/aba1ea065dca17654567de5e81a9895c to your computer and use it in GitHub Desktop.
Save TheDutchCoder/aba1ea065dca17654567de5e81a9895c to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
loader.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<g>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1.4s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
<circle class="text-primary-300" fill="none" stroke="#000" cx="50" cy="50" r="25.5" stroke-width="5"></circle>
<circle class="text-primary-700" cx="50" cy="50" r="25.5" fill="none" stroke="#ff0000" stroke-width="5" stroke-dasharray="250" stroke-dashoffset="75" stroke-linecap="round">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" values="0 50 50;0 50 50;45 50 50;45 50 50;360 50 50" repeatCount="indefinite" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"></animateTransform>
<animate attributeName="stroke-dashoffset" dur="2s" values="240;240;120;120;240" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"></animate>
</circle>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment