Gears [CSS]

dabblet.css

/**
 * Gears [CSS]
 */
html {
	background: #333;
	background:	

	radial-gradient(#333,#222);
	min-height: 100%;
	height:100%;
	overflow:hidden;
}

.gear {
	display: block;
	display: block;
	border-radius: 50%;
	padding:0;
	position:absolute;
	color:white; /* Set the colour here */
	background-color: transparent;
 }
 
.gear.one {
  	border:3px dashed; 
  	height: 60px;
	width: 60px;
	box-shadow:	inset 0 0 0 6px white;
	top:20%;
	left:20%;
	animation: spin 20s linear infinite;
 }

.gear.two {
  	border:2px dashed; 
  	height: 20px;
	width: 20px;
	box-shadow:	inset 0 0 0 4px white;
	top:30%;
	left:40%;
	animation: spin 20s linear infinite;
 }

.gear.three {
  	border:4px dashed; 
  	height: 100px;
	width: 100px;
	box-shadow:	inset 0 0 0 20px white;
	top:50%;
	left:60%;
	animation: spin 20s linear infinite;
 }
 
.gear.four {
  	border:4px dashed; 
  	height: 70px;
	width: 70px;
	box-shadow:	inset 0 0 0 30px white;
	top:40%;
	left:40%;
	animation: spin 20s linear infinite;
 }
 
@keyframes spin {
  100% { transform: rotate(360deg); }
}

.wrapper {
	background:#888;

	width:400px;
	height:300px;
	
	left:50%;
	top:50%;
	margin:-150px -200px;
	position:absolute;
	display:block;
}

dabblet.html

<div class="wrapper">

<i class="gear one"></i>

<i class="gear two"></i>

<i class="gear three"></i>

<i class="gear four"></i>

</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}