Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thatisuday/ng-spin
:alarm_clock: $http interceptor spinner for angular.js
https://github.com/thatisuday/ng-spin
Last synced: 1 day ago
JSON representation
:alarm_clock: $http interceptor spinner for angular.js
- Host: GitHub
- URL: https://github.com/thatisuday/ng-spin
- Owner: thatisuday
- License: apache-2.0
- Created: 2016-08-12T21:08:04.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2016-10-06T01:49:21.000Z (about 8 years ago)
- Last Synced: 2024-10-18T18:25:09.865Z (24 days ago)
- Language: CSS
- Homepage:
- Size: 43 KB
- Stars: 8
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-spin  [](https://www.npmjs.com/package/ng-spin) [](https://rawgit.com/thatisuday/ng-spin/master/demo/main.html)
##### $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/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`](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` 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 `[email protected]`
- 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.