Experimental loader

dabblet.css

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

html {
	min-height: 100%;
	background: linear-gradient(hsla(200,20%,50%,.1),hsla(200,25%,50%,.5));
}

.box {
	display: block;
	width: 64px;
	height: 64px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -32px;
	animation: spin 5s infinite linear;
}

.box i {
	display: block;
	float: left;
	width: 32px;
	height: 32px;
	background: #fff;
	animation: rotary 5s infinite;
}

.box i:nth-child(1) { border-radius: 100% 0 0 0 }
.box i:nth-child(2) { border-radius: 0 100% 0 0 }
.box i:nth-child(3) { border-radius: 0 0 0 100% }
.box i:nth-child(4) { border-radius: 0 0 100% 0 }

@keyframes rotary {
	25%, 49% { transform: rotate(90deg); }
	75%,100% { transform: rotate(0); }
}

@keyframes spin {
	to { transform: rotate(720deg); }
}

dabblet.html

<div class=box>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
</div>

settings.json

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