CSS BoxSpin

dabblet.css

/**
 * CSS BoxSpin
 * Attempt to remake http://www.cesmes.fi/flash/boxSpin/ in CSS 
 */
body {
	background: #f06;	
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
}
.spinner {
	
	width: 40px;
	height: 40px;
	display: block;
	float: left;
	border-radius: 50%;
	-webkit-animation-name: spin;   
	-webkit-animation-duration: 3s; /* 3 seconds */
 	-webkit-animation-iteration-count: infinite; 
 	-webkit-animation-timing-function: linear;
}
.red {		
	background-image: -webkit-radial-gradient(45px 45px, circle cover, red, orange);
}
.deg0:hover {
 	@-webkit-keyframes spin {  
  		from { -webkit-transform: rotate(0deg); }
  		to { -webkit-transform: rotate(360deg); }
	}
}

dabblet.html

<ul>
<li class="spinner red deg0"></li>
</ul>

settings.json

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