Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<script src="https://code.angularjs.org/1.3.0-beta.14/angular-animate.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">
<div ng-controller="MyCtrl">
<label><input type="checkbox" ng-model="isThinking" />Show Loader</label> <br>
isThinking: <code>{{ isThinking }}</code>
<i class="loader" ng-show="isThinking">Hmm...</i>
</div>
CSS
@-webkit-keyframes spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
.loader {
position: absolute;
top: 100px;
left: 100px;
padding: 5px;
border-radius: 2px;
background: #eee;
-webkit-animation: spinner 2s infinite linear;
}
JavaScript
var myApp = angular.module('myApp',['ngAnimate']);
myApp.controller('MyCtrl', function($scope) {
$scope.isThinking = true;
});