Tron loader

dabblet.css

/*
* Tron loader
*/
 
* {
 	margin: 0;
	padding: 0;
}
body {
	background: #333;
}
progress {
	position: absolute;
	top: 50%;
	margin-top: -3px;
	width: 100%;
	height: 6px;
	border-top: 1px solid rgba(10,10,10,.85);
	border-bottom: 1px solid rgba(200,200,200,.15);
	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;
	animation: m 2.5s infinite linear;
}

::-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"}