spin example

by Ravindra Athreya

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<h4>FontAwesome</h4>

<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-circle-o-notch fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-refresh fa-spin-custom"></i>

<br />
<br />

<h4>Glyphicons</h4>
 <span class="glyphicon glyphicon-refresh glyphicon-spin"></span>

CSS

h4 {
    font-size:18px;
    font-weight:bold;
}
.fa-spin-custom, .glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}