# ng-spin

> $http interceptor spinner for angular.js

Latest version **1.0.2** (published 2016-08-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install ng-spin
pnpm add ng-spin
yarn add ng-spin
bun add ng-spin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2016-08-13 |
| First published | 2016-08-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Uday Hiwarale |
| Maintainers | thatisuday |

## Links

- npm: https://www.npmjs.com/package/ng-spin
- Repository: https://github.com/thatisuday/ng-spin
- Homepage: https://github.com/thatisuday/ng-spin#readme
- Issues: https://github.com/thatisuday/ng-spin/issues
- npm.io page: https://npm.io/package/ng-spin

## Recent versions

- 1.0.2 (latest) — 2016-08-13
- 1.0.1 — 2016-08-13
- 1.0.0 — 2016-08-13

## README

# 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](http://tobiasahlin.com/spinkit/)**.

***

## 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 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 add `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.

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(function($ngSpin, $scope){
	$scope.loadData = function(){
		$ngSpin.start();

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

***

## Demo

[`Preview`](https://rawgit.com/thatisuday/ng-spin/master/demo/main.html)

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`](https://www.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` 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.

---
_Source: https://npm.io/package/ng-spin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._