Bootstrap 3 Loading Button with progress icon
This is a simple Twitter Bootstrap 3 Loading Button with progress icon
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<h3>Animated button</h3>
<button class="btn btn-lg btn-warning"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...</button>
</div>
CSS
.glyphicon-refresh-animate {
-animation: spin .9s infinite linear;
-webkit-animation: spin2 .9s infinite linear;
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */