iMessage-style loader

dabblet.css

/**
 * iMessage-style loader
 */
 
@keyframes fade {
	to { background: rgba(0,0,0,.1); }
}
 
.progress,
.progress:before,
.progress:after {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: rgba(0,0,0,.5);
	animation: .6s fade linear alternate infinite;
}
 
.progress {
	white-space: nowrap;
}
 
.progress:before {
	margin-left: 1.3em;
	animation-delay: .2s;
}
 
.progress:after {
	margin-left: .3em;
	animation-delay: .4s;
}

dabblet.html

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

dabblet.js

// alert('Hello world!');

settings.json

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