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

dabblet.css

/**
 * Attempt for Chrome-style progress-indicator with SVG and CSS animations
 */
 
@keyframes spin {
	to {
		stroke-dashoffset: -264;
	}
}

.progress circle {
	fill: none;
	stroke: rgba(255, 0, 0, 0.5);
	stroke-width: 16;
	stroke-linecap: round;
	stroke-dasharray: 0, 0, 50, 214;
	stroke-dashoffset: 0;
	animation: spin 4s infinite linear;
}

dabblet.html

<svg class="progress" viewBox="0 0 100 100">
	<circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
</svg>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}