Angular Save button animation

Angular Save button animation

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div ng-app="sampleapp">
  <div ng-controller="samplecontoller">

    <form ng-submit="onSubmit()" class="form">
      <div class="form-actions">
        <span class="showtime">{{showme}}</span>
        <button class="btn btn-primary">
          <span data-ng-hide="loading">
            Save 
        </span>
          <span data-ng-show="loading">
            <i class="fa fa-spinner fa-spin"></i> Saving
        </span>
        </button>
      </div>
    </form>

  </div>
</div>

CSS

.form {
  padding: 20px
}

.cancel {
  padding: 20px;
}

body {
  font-weight: normal;
}

.showtime {
	color: #797A7C;
	font-style: italic;
}

JavaScript

var myapp = angular.module('sampleapp', []);

myapp.controller('samplecontoller', function($scope, $timeout) {

  $scope.loading = false;
  $scope.showme = '';

  var milliseconds = new Date().getHours() + ':' + new Date().getMinutes();
  var ampm = (new Date().getHours() >= 12) ? "PM" : "AM";

  $scope.onSubmit = function() {
    $scope.loading = true;
    $scope.show = true;

    $timeout(function() {
      $scope.loading = false;
      $scope.showme = "Last saved " + milliseconds + ampm + ' ';
    }, 2000)

  }

});