Gears [CSS]

dabblet.css

/**
 * Gears [CSS]
 */
 
html {
	background:#eee;
	min-height: 100%;
	height:100%;
	overflow:hidden;
}

.gear {
	display: block;
	display: block;
	border-radius: 50%;
	padding:0;
	position:absolute;
	background-color: transparent;
 }
 
.gear.one {
  	border:3px dashed; 
  	height: 60px;
	width: 60px;
	color:#feb800;
	box-shadow:
	inset 0 0 0 6px #feb800,
	inset 0 0 0 10px white,
	inset 0 0 0 15px #feb800;
	top:20%;
	left:20%;
	animation: spin 2s linear infinite;
 }
 
  .gear.one:before {
  	display:block;
 	content:'';
 	height:18px;
 	width:18px;
 	color:#feb800;
 	border:4px solid;
 	position:absolute;
 	top:17px;
 	left:17px;
 	border-radius:50%;
 }
 
 .gear.one:after {
 	display:block;
 	content:'';
 	height:26px;
 	width:26px;
 	color:#feb800;
 	border:3px dashed;
 	position:absolute;
 	top:14px;
 	left:14px;
 	border-radius:50%;
 }

.gear.two {
  	border:2px dashed; 
  	height: 20px;
	width: 20px;
	color:#3D81B6;
	box-shadow:	inset 0 0 0 4px #3D81B6;
	top:90px;
	left:160px;
	animation: spin 1s linear infinite;
 }

.gear.three {
  	border:4px dashed; 
  	height: 100px;
	width: 100px;
	color:#eb7966;
	box-shadow:
	inset 0 0 0 10px #eb7966,
	inset 0 0 0 15px white,
	inset 0 0 0 20px #eb7966;
	top:126px;
	left:192px;
	animation: spin 10s linear infinite;
 }
 
.gear.four {
  	border:4px dashed; 
  	height: 70px;
	width: 70px;
	color:#4CB865;
	box-shadow:	inset 0 0 0 20px #4CB865;
	top:120px;
	left:110px;
	animation: spin-reverse 2s linear infinite;
 }
 
  .gear.four:after {
  	display:block;
 	content:'';
 	height:22px;
 	width:22px;
 	background:#4CB865;
 	position:absolute;
 	top:24px;
 	left:24px;
 	border-radius:50%;
 }
 
@keyframes spin {
  100% { transform: rotate(360deg); }
}

@keyframes spin-reverse {
  100% { transform: rotate(-360deg); }
}

.wrapper {
	background:#fff;

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