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

svg {
	width: 500px;
	height: 500px;
}
path {
    stroke: black;
    stroke-linecap: round;
    stroke-width:2;
    stroke-dasharray: 1200,1200;
    stroke-dashoffset: 0;
    stroke-linejoin: round;
	animation: spin 8.5s infinite linear;
}
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 473 238" >

<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 "/>
	
	<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M170.713,149.432h10.543v10.543h-10.543V149.432
			L170.713,149.432z M314.514,181.171c2.817-37.341,5.65-67.29,5.536-80.581c-0.007-0.897-0.427-1.678-1.177-2.183
			c-0.751-0.506-1.625-0.6-2.465-0.268l-50.12,19.793l-1.506-18.463c-0.072-0.886-0.529-1.618-1.293-2.073
			c-0.764-0.454-1.623-0.505-2.437-0.146l-46.786,20.668l-0.553-0.54c-0.141-6.069-0.299-26.942-0.455-33.009
			c-0.02-0.757-0.145-1.321-0.436-2.018c-0.304-0.661-0.615-1.118-1.127-1.634c-0.521-0.499-0.987-0.809-1.649-1.096
			c-0.701-0.28-1.267-0.395-2.022-0.404c-4.417,0.028-42.157,0.35-42.788,0.6c-0.672,0.012-1.178,0.114-1.8,0.37
			c-0.589,0.262-0.998,0.537-1.46,0.99c-0.448,0.465-0.72,0.87-0.981,1.463c-0.249,0.619-0.354,1.128-0.362,1.797
			c0.069,8.415,1.903,96.201,3.953,96.201c1.953,0,3.574-73.273,3.881-92.849l0.021-0.02c10.854,0.113,28.335,0.377,35.663,0.499
			l-0.035-0.06c0.004,6.385,0.012,27.574,0.039,33.958c0.02,0.784,0.153,1.398,0.455,2.121c0.31,0.692,0.648,1.18,1.176,1.722
			c0.553,0.527,1.033,0.85,1.733,1.156c0.732,0.296,1.339,0.42,2.128,0.431c0.186,0.002,0.371,0.002,0.558,0.002l48.905-20.837
			l1.07,16.271c0.071,1.094,0.611,2.004,1.536,2.591c0.925,0.587,1.978,0.689,2.998,0.288l47.804-18.755
			C313.93,125.159,312.934,170.74,314.514,181.171L314.514,181.171z M297.213,135.377h10.542v10.543h-10.542V135.377
			L297.213,135.377z M269.102,135.377h10.543v10.543h-10.543V135.377L269.102,135.377z M255.046,135.377h10.543v10.543h-10.543
			V135.377L255.046,135.377z M240.991,135.377h10.543v10.543h-10.543V135.377L240.991,135.377z M212.88,135.377h10.543v10.543
			H212.88V135.377L212.88,135.377z M198.824,135.377h10.543v10.543h-10.543V135.377L198.824,135.377z M184.769,135.377h10.543
			v10.543h-10.543V135.377L184.769,135.377z M297.213,149.432h10.542v10.543h-10.542V149.432L297.213,149.432z M283.157,149.432
			H293.7v10.543h-10.543V149.432L283.157,149.432z M269.102,149.432h10.543v10.543h-10.543V149.432L269.102,149.432z
			 M240.991,149.432h10.543v10.543h-10.543V149.432L240.991,149.432z M226.935,149.432h10.543v10.543h-10.543V149.432
			L226.935,149.432z M212.88,149.432h10.543v10.543H212.88V149.432L212.88,149.432z M198.824,149.432h10.543v10.543h-10.543V149.432
			z"></path>
</svg>

dabblet.js

// alert('Hello world!');

settings.json

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