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 {
	0% {
		stroke: #00aeef
	}
	37.5% {
		stroke: #ed1c24;
	}
	67.5% {
		stroke: #f69f37;
	}
	100% {
		stroke-dashoffset: -240;
		stroke: #00aeef;
	}
}

svg {
	width: 500px;
	height: 500px;
}

polygon {
    stroke: black;
    stroke-linecap: round;
    stroke-width: 4;
    stroke-dasharray: 0, 0, 50, 190;
    stroke-dashoffset: 0;
    stroke-linejoin: round;
	animation: spin 3.5s infinite linear;
}

dabblet.html

<svg class="progress" viewBox="0 0 52.56 60.756" >

<polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="
	26.844,50.531 9.975,41.525 9.975,21.517 26.844,31.531 43.714,21.125 43.714,42.047 26.844,50.531 26.844,31.531 9.975,21.517 
	26.844,11.531 43.714,21.125 26.844,31.531 "/>
	
</svg>

dabblet.js

// alert('Hello world!');

settings.json

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