Skip to content

Instantly share code, notes, and snippets.

@PerpetualBeta

PerpetualBeta/loading.svg

Created May 15, 2016 17:26
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 PerpetualBeta/79801696556be211d4adede46a315283 to your computer and use it in GitHub Desktop.
Save PerpetualBeta/79801696556be211d4adede46a315283 to your computer and use it in GitHub Desktop.
Download ZIP
Spinning activity indicator.
Display the source blob
Display the rendered blob
Raw
loading.svg
<svg id="loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#666">
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(0 16 16)">
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0"/>
</path>
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(45 16 16)">
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.125s"/>
</path>
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(90 16 16)">
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.25s"/>
</path>
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(135 16 16)">
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.375s"/>
</path>
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(180 16 16)">
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.5s"/>
</path>
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(225 16 16)">
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.675s"/>
</path>
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(270 16 16)">
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.75s"/>
</path>
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(315 16 16)">
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.875s"/>
</path>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment