ducin/angular-ajax-spinner.html

## angular-ajax-spinner.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-mocks.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.6.1/angular-spinner.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.js"></script>
        <script type="text/javascript">
var app = angular.module('myApp', ['ngMockE2E', 'angularSpinner']);

app.config(function($provide) {
    $provide.decorator('$httpBackend', function($delegate) {
        var proxy = function(method, url, data, callback, headers) {
            var interceptor = function() {
                var _this = this,
                    _arguments = arguments;
                setTimeout(function() {
                    callback.apply(_this, _arguments);
                }, 700);
            };
            return $delegate.call(this, method, url, data, interceptor, headers);
        };
        for(var key in $delegate) {
            proxy[key] = $delegate[key];
        }
        return proxy;
    });
});

app.run(function($httpBackend) {
    $httpBackend.whenGET(/^\/rest\/foo/).respond(function(method, url, data) {
        return [200, {foo:[1, 2, 3]}, {}];
    });
    $httpBackend.whenGET(/^templates\//).passThrough();
});

app.controller('myCtrl', function($scope, $http, usSpinnerService) {
    $scope.el = angular.element('#result');
    $scope.fetch = function(){
        $scope.el.html('waiting for result...');
        $http.get('/rest/foo/').success(function(data, status, headers, config){
            $scope.el.html(JSON.stringify(data));
            $scope.stopSpin();
        });
        $scope.startSpin();
    };
    $scope.startSpin = function(){
        usSpinnerService.spin('spinner-1');
    }
    $scope.stopSpin = function(){
        usSpinnerService.stop('spinner-1');
    }
});
        </script>
    </head>
    <body ng-app="myApp">
        <div id="box" ng-controller="myCtrl" us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1" style="border: 1px solid #acc; background-color: #cee; height: 300px; width: 50%; position: relative;">
            <!--<button ng-click="startSpin()">start spin</button>-->
            <!--<button ng-click="stopSpin()">stop spin</button>-->
            <button ng-click="fetch()">click me</button>
            <span id="result">waiting for result...</span>
        </div>
    </body>
</html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-mocks.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.6.1/angular-spinner.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.js"></script>
	<script type="text/javascript">
	var app = angular.module('myApp', ['ngMockE2E', 'angularSpinner']);

	app.config(function($provide) {
	$provide.decorator('$httpBackend', function($delegate) {
	var proxy = function(method, url, data, callback, headers) {
	var interceptor = function() {
	var _this = this,
	_arguments = arguments;
	setTimeout(function() {
	callback.apply(_this, _arguments);
	}, 700);
	};
	return $delegate.call(this, method, url, data, interceptor, headers);
	};
	for(var key in $delegate) {
	proxy[key] = $delegate[key];
	}
	return proxy;
	});
	});

	app.run(function($httpBackend) {
	$httpBackend.whenGET(/^\/rest\/foo/).respond(function(method, url, data) {
	return [200, {foo:[1, 2, 3]}, {}];
	});
	$httpBackend.whenGET(/^templates\//).passThrough();
	});

	app.controller('myCtrl', function($scope, $http, usSpinnerService) {
	$scope.el = angular.element('#result');
	$scope.fetch = function(){
	$scope.el.html('waiting for result...');
	$http.get('/rest/foo/').success(function(data, status, headers, config){
	$scope.el.html(JSON.stringify(data));
	$scope.stopSpin();
	});
	$scope.startSpin();
	};
	$scope.startSpin = function(){
	usSpinnerService.spin('spinner-1');
	}
	$scope.stopSpin = function(){
	usSpinnerService.stop('spinner-1');
	}
	});
	</script>
	</head>
	<body ng-app="myApp">
	<div id="box" ng-controller="myCtrl" us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1" style="border: 1px solid #acc; background-color: #cee; height: 300px; width: 50%; position: relative;">
	<!--<button ng-click="startSpin()">start spin</button>-->
	<!--<button ng-click="stopSpin()">stop spin</button>-->
	<button ng-click="fetch()">click me</button>
	<span id="result">waiting for result...</span>
	</div>
	</body>
	</html>