fazlurr
6/22/2014 - 2:47 PM

Attempt for Chrome-style progress-indicator with SVG and CSS animations

Attempt for Chrome-style progress-indicator with SVG and CSS animations

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
// alert('Hello world!');
<svg class="progress" viewBox="0 0 100 100">
	<circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
</svg>
/**
 * 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;
}