Light loader

dabblet.css

/**
 * Light loader
 */
 
 * {
 margin: 0;
 padding: 0;
 }

html {
	min-height: 100%;
	background: #444 linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.2));
}

.load:not([value]) {
	border: 0;
	position: absolute;
	width: 100%;
	height: 4px;
	top: 50%;
	margin-top: -4px;
	box-shadow: 0 1px 0 rgba(100,100,100,.2);
	background: rgba(0,0,0,.2) linear-gradient(0deg,hsla(200,100%,50%,0) 15%,
		    hsla(190,80%,70%,.4),
		    hsla(200,100%,50%,0) 85%) no-repeat;
	background-size: 400px 8px;
	display: block;
	animation: m 2.5s infinite linear;
	z-index: 999;
}

::-webkit-progress-bar {
	display: none;
}

::-moz-progress-bar {
	visibility: hidden;
}

@keyframes m {
	0% { background-position: -100%; }
	50%,100% { background-position: 200%; }
}

dabblet.html

<progress class=load></progress>

settings.json

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