Better FontAwesome Spinner

by paulftw

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<i class="icon-spinner icon-myspin icon-4x"></i>
<div></div>
<i class="icon-spinner icon-spin icon-4x"></i>

CSS

.icon-myspin {
 display: inline-block;
 -webkit-animation: eightsteps 1s steps(1) infinite;
}

@-webkit-keyframes eightsteps {
    0% { -webkit-transform: rotate(0deg); }
    12.5% { -webkit-transform: rotate(45deg); }
    25% { -webkit-transform: rotate(90deg); }
    37.5% { -webkit-transform: rotate(135deg); }
    50% { -webkit-transform: rotate(180deg); }
    62.5% { -webkit-transform: rotate(225deg); }
    75% { -webkit-transform: rotate(270deg); }
    87.5% { -webkit-transform: rotate(315deg); }
    100% { -webkit-transform: rotate(360deg); }
}

div {
    display: inline-block;
    width: 120px;
}

body {
    padding: 50px;
}