CSS3 Spinner

Check different revisions for different spinner effects.

by lun471k

HTML

<div class="spinner"><div class="inner"><div class="inner"><div class="inner"><div class="inner"><div class="inner"><div class="inner"><div class="inner"></div></div></div></div></div></div></div></div>

CSS

.spinner {width: 150px;height: 150px;
-webkit-animation: sweep 1s infinite linear;
border-radius:50%;
border-top:5px solid #66cc33;
border-right:5px solid #66cc33;
background-color:transparent;
}
.inner {
    margin:0 auto;
width: 66%;height: 66%;
    margin-top: 18%;
        margin-left:18%;
-webkit-animation: sweepMe 1s infinite linear;
border-radius:50%;
border-top:5px solid #66cc33;
border-right:4px solid #66cc33;
background-color:transparent;
}
@-webkit-keyframes sweep { to { -webkit-transform: rotate(360deg); } }
@-webkit-keyframes sweepMe { to { -webkit-transform: rotate(360deg); } }