JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<button type="submit" class="btn btn-block btn-primary">
<span ng-if="!login.processing">Login</span>
<span ng-if="login.processing" class="spinner"><span class="glyphicon glyphicon-repeat"></span></span>
</button>
CSS
.spinner {
-webkit-animation:spin 1s infinite linear;
-moz-animation:spin 1s infinite linear;
animation:spin 1s infinite linear;
display: block;
position: absolute;
top: 7px;
left: calc(50% + 20px);
}
@keyframes spin {
0% { transform:rotate(0deg); }
50% { transform:rotate(180deg); }
100% { transform:rotate(360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
50% { -webkit-transform:rotate(180deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
50% { -moz-transform:rotate(180deg); }
100% { -moz-transform:rotate(360deg); }
}