Skip to content

Instantly share code, notes, and snippets.

Created July 26, 2013 14:43
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 14 You must be signed in to fork a gist
  • Save anonymous/6089395 to your computer and use it in GitHub Desktop.
Save anonymous/6089395 to your computer and use it in GitHub Desktop.
Attempt for Chrome-style progress-indicator with SVG and CSS animations
/**
* Attempt for Chrome-style progress-indicator with SVG and CSS animations
*/
@keyframes spin {
to {
stroke-dashoffset: -264;
}
}
.progress circle {
fill: none;
stroke: slategray;
stroke-width: 16;
stroke-linecap: round;
stroke-dasharray: 0, 0, 50, 214;
stroke-dashoffset: 0;
animation: spin 4s infinite linear;
}
<svg class="progress" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
</svg>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment