Spinner

dabblet.css

/**
 * Spinner
 */

body {margin: 100px;background-color:#434343}
.spinner {width:100%; height:20px;text-align:center;margin:0;padding:4px;}

.spinner ul {
		display: inline-block;
		padding: 0;
		margin: 0;
		}

.spinner ul li {
		display: inline-block;
		height: 10px;
		width:4px;
		margin: 0 0 0 -2px;
		padding: 0;
		background-color: #FFF;
		transition: all .5s linear;
		animation: 1s spin linear infinite;
		animation-direction:alternate;
		}
 
.spinner ul li:nth-child(1) {animation-delay: 0s;}
.spinner ul li:nth-child(2)	{animation-delay: .125s;}
.spinner ul li:nth-child(3) {animation-delay: .25s;}
.spinner ul li:nth-child(4) {animation-delay: .325s;}



@-webkit-keyframes spin {

0% {opacity: 1;-webkit-transform:scaleY(1.2);}
25%, 75%  {opacity: 0;}
}

dabblet.html

<div class="spinner"> 
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}