Angular: Empty Fiddle

http://angularjs.org/

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">
<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<script src="https://code.angularjs.org/snapshot/angular-animate.js"></script>
<div ng-controller="MyCtrl">
    <label><input type="checkbox" ng-model="isThinking" />Is NOT BLUE!</label> <br>
    isThinking: <code>{{ isThinking }}</code>
    
    <i class="loader" ng-class="{blue:!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;
}
.blue.ng-animate {
    background:#009;  
}
.blue {
    background:#55f;  
}

JavaScript

var myApp = angular.module('myApp',['ngAnimate']);

myApp.controller('MyCtrl', function($scope) {
    $scope.isThinking = true;
});