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: 360;
	}
}

.progress circle {
	fill: none;
	stroke: rgba(255,200,255,.7);
	stroke-width: 1px;
	stroke-linecap: square;
	stroke-dasharray: 0, 0, 50, 50;
	stroke-dashoffset: 10;
	animation: spin 5s infinite linear;
}

.progress :nth-child(3n) {
	stroke: rgba(50,200,255,.7);
	stroke-dashoffset: 200;
	stroke-dasharray: 0, 0, 25, 15;
	animation: spin 10s infinite linear;
}

.progress :nth-child(2n+1) {
	stroke: rgba(50,200,255,.7);
	stroke-dashoffset: 200;
	stroke-dasharray: 0, 0, 25, 15;
	animation: spin 5s infinite linear;
}

dabblet.html

<svg class="progress" viewBox="0 0 100 100">
	<circle cx="50" cy="50" r="15"/>
	<circle cx="50" cy="50" r="14"/>
	<circle cx="50" cy="50" r="13"/>
	<circle cx="50" cy="50" r="12"/>
	<circle cx="50" cy="50" r="11"/>
	<circle cx="50" cy="50" r="110"/>
</svg>

dabblet.js

// alert('Hello world!');

settings.json

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