Loading...

dabblet.css

/**
 * Loading...
 */
 
/**
* An attempt of an accessible and crossbrowser loading bar.
* Remove the animations from the pseudo elements to see how it looks like in old browsers, simple eh?
*/
 
@keyframes load {
	0% {left: 0; background-color: #ddd}
	50% {left: 80px; opacity: 0.8; width: 70px}
	100% {left: 200px; width: 20px; opacity: 1; background-color: #ddd}
}

@keyframes hideload {
	0% {background-color: #fff}
	100% {background-color: #fff}
}

#progress:before {
	position: absolute;
	z-index: 1;
	content: "";
	width: 300px;
	height: 20px;
	animation: hideload 2400ms infinite alternate
}

#progress:after {
	content: "";
	z-index: 2;
	position: absolute;
	left: 0;
	border-radius: 4px;
	width: 20px;
	height: 20px;
	animation: load 2400ms infinite alternate
}

dabblet.html

<div id="progress">Loading, please wait</div>

settings.json

{"view":"split","prefixfree":"1","page":"html"}