Skip to content

Instantly share code, notes, and snippets.

@timothydang
Forked from anonymous/dabblet.css
Created August 4, 2013 05:53
Show Gist options
  • Save timothydang/6149333 to your computer and use it in GitHub Desktop.
Save timothydang/6149333 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":"70","seethrough":"1","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment