AngularJS Animations fade out example using animate.css

<!DOCTYPE html>
<html>

  <head>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.18/angular-animate.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>AngularJS Animations - Fade Out - Animate.css example</h1>
    <div ng-app="exampleApp" ng-init="fadeout=false">
      <button ng-click="fadeout=!fadeout">{{fadeout ? "Reset" : "Fade Out"}}</button>
      <div class="animate-me" ng-hide="fadeout">
        <i class="fa fa-spinner fa-spin fa-lg"></i>
        <span class="loading-text">Loading</span>
      </div>
    </div>
  </body>

</html>

var exampleApp = angular.module("exampleApp", ["ngAnimate"]);

.animate-me {
  border: 1px solid;
  border-radius:5px;
  width: 80px;
  padding: 4px;
  background-color: gray;
  box-shadow: 8px 8px 5px #888888;
}

.animate-me.ng-hide-add {
    animation: fadeOut 3s;
    -webkit-animation: fadeOut 3s;
}

.loading-text {
  padding: 2px;
  color: white;
}

.fa-spinner {
  color: white;
}

button {
  margin-bottom: 10px;
}