dabblet.css

/**
 * Google-style progress indicator
 */

@keyframes progress {
	50% { border-width: .5em 0; }
	to { border-width: .5em 0 0 0; }
}

@keyframes rotate {
	to { transform: rotate(-270deg); }
}

.progress {
	font-size: 50px; /* Size of the progress indicator */
	width: 1em;
	height: 1em;
	border: solid white;
	border-top-color: #ddd;
	border-width: 0 0 .5em 0;
	border-radius: 50%;
	box-sizing: border-box;
	background: linear-gradient(white 50%, #ddd 50%);
	background-origin: border-box;
	transform: rotate(90deg);
	animation: rotate 2s steps(4) infinite, progress .5s linear infinite alternate;
}

dabblet.html

<div class="progress"></div>

dabblet.js

// alert('Hello world!');

settings.json

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