ng-spin 

$http interceptor spinner for angular.js

Sometimes, you just need to show a spinning animation for some or every $http (ajax) request. This module makes your life easier by providing global, request specific and manual/non-http option to show/hide spinner. Shipped with multiple spinner types made by tobiasahlin.

---

Install

Bower

bower install ng-spin

npm

npm install ng-spin

Include angular.min.js, ng-spin.min.js and ng-spin.min.css

Add thatisuday.ng-spin module to your app's dependencies list.

---

Config

angular
.module('myApp', ['thatisuday.ng-spin'])
.config(function(ngSpinOpsProvider){
	ngSpinOpsProvider.setOps({
		autoGlobal : false,
		spinner : 'big-bang',
		size : 'normal',
		color : '#333',
		position : 'right-top',
		blocking : false,
		delay : 0,
		extend : 100
	});
})

option	values	default	role
autoGlobal	true/false	false	show/hide spinner for every $http request (automatically)
spinner	bars, big-bang, binary, cubes, flipboard, ping, plane, snake, sos, worm	big-bang	choose spinner animation type
size	normal, sm, xs	normal	size of the spinner
color	hex, rgba	#333	color of the spinner
position	left-top, right-top, left-bottom, right-bottom, center	right-top	position of the spinner on the page
blocking	false, white, black, transparent	false	show page overlay for spinner
delay	time in milliseconds	0	delay animation start
extend	time in milliseconds	100	extend animation

delay and extend options are used only in case of Global or Request specific implementation.

Do not set value of delay more than extend.

---

Implement (use)

Global (auto)

If you are setting autoGlobal in config to true then you pretty much done here. All your $http requests will be intercepted by ng-spin and spinner will be shown/hidden on request/response.

But If you want to show animation manually, then there are two other options as mentioned below.

Request specific (semi-auto)

$http({
	url : 'api.ofawebsite.com/user/me',
	method : 'POST',
	ngSpin : true
})

Setting ngSpin to true in request object of a $http request will trigger ng-spin interceptor to show spinner for that request.

Manual

You can use $ngSpin service which returns start and stop method for spinner.

myApp.controller('myCtrl', function($ngSpin, $scope){
	$scope.loadData = function(){
		$ngSpin.start();

		$http({...}).then(function(res){
			$ngSpin.stop();
		});
	}
});

---

Demo

Preview

As most of the thing is happening inside config phase, there isn't must to simulate. Clone this repo and open demo/main.html in browser. Try different options in config block.

Go to archibiz.com to get a look and feel of it. I have set autoGlobal to true, so every $http request is intercepted by ng-spin.

---

Build

This repo is built with gulp. Clone this repo and use npm install --only=dev to install all dev-dependencies. Use gulp build or gulp watch for custom build.

---

Bug reports andContribution

• If you have any queries or bug reports, create issues here or send me email on thatisuday@gmail.com
• If you have more spinners or any enhancement, please send a PR with details.
• If you run naked around a tree, at about 87 km/h, there is a possibility of fucking yourself.