Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@mikeprevette
Forked from anonymous/dabblet.css
Created March 22, 2014 18:56
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 mikeprevette/9712396 to your computer and use it in GitHub Desktop.
Save mikeprevette/9712396 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: -65;
}
}
.progress circle {
fill: none;
stroke: slategray;
stroke-width: 1;
stroke-linecap: round;
stroke-dasharray: 0, 0, 555, 65;
stroke-dashoffset: 0;
animation: spin 4s infinite linear;
}
<svg class="progress" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="12" transform="rotate(-90,50,50)" />
</svg>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"80","seethrough":"1","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment