Loading spinner popup

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<div ng-app="app" ng-controller="MainController">
    <br/>
    <button type="button" class="btn btn-default" x-ng-click="load()">
        <span x-ng-show="loading">Stop Loading</span>
        <span x-ng-hide="loading">Load</span>
    </button>
    
    <div class="hasSpinnerOuter" x-ng-class="{active: loading}">
        <div class="hasSpinnerInner">
            <div class="alert alert-loading">
                <span class="spinner">
                <i class="fa fa-refresh fa-spin"></i></span>
                Loading...
            <div>
        </div>
    </div>
    
</div>

CSS

.hasSpinnerOuter {
    position: fixed;
    left: 50%;
    top: 10px;
    
    opacity: 0;

    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
}

.alert-loading {
    background-color: #eee;
    border-color: #ccc;
    color: #b94a48;
}

.hasSpinnerInner {
    position: relative;
    left: -50%;
}

.spinner {
  display: inline-block;
  width: 16px;
}

.hasSpinnerOuter.active {
    cursor:progress;
    opacity: 1;
}

JavaScript

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

function MainController($scope, $timeout) {
    var scope = $scope;
    scope.loading = false;

    scope.load = function() {
        scope.loading = !scope.loading;
    }
}