Angular directive to show an animated spinner (using [spin.js](http://fgnass.github.io/spin.js/))
npm install angular-spinnerAngular directive to show an animated spinner (using spin.js)
Copyright (C) 2013, 2014, 2015, 2016, 2017 Uri Shaked, Islam Attrash and contributors


Get angular-spinner
- via npm: by running `` $ npm install angular-spinner ` from your console`
- via bower: by running $ bower install angular-spinner ` from your console
Include angular-spinner.js in your application.
`js
import 'angular-spinner';
OR:
require('angular-spinner');
`
OR by picking one of the following file (depends on the package manager):
`html`
Add the module angularSpinner as a dependency to your app module:
`js`
var myapp = angular.module('myapp', ['angularSpinner']);
You can now start using the us-spinner directive to display an animated
spinner. For example :
`html`
You can also pass spinner options, for example:
`html`
Possible configuration options are described in the spin.js homepage.
You can direct the spinner to start and stop based on a scope expression, for example:
`html`
You can use usSpinnerConfigProvider to configure default options for all spinners globally. Any options passed from a directive still override these.
`js`
myapp.config(['usSpinnerConfigProvider', function (usSpinnerConfigProvider) {
usSpinnerConfigProvider.setDefaults({color: 'blue'});
}]);
Themes provide named default options for spinners. Any options passed from a directive still override these.
`js`
myapp.config(['usSpinnerConfigProvider', function (usSpinnerConfigProvider) {
usSpinnerConfigProvider.setTheme('bigBlue', {color: 'blue', radius: 20});
usSpinnerConfigProvider.setTheme('smallRed', {color: 'red', radius: 6});
}]);
`html`
`html
`
The usSpinnerService service let you control spin start and stop by key.
Whenever the key is not specified all the spinner will be affected (Start/Stop all spinners):
`js`
app.controller('MyController', ['$scope', 'usSpinnerService', function($scope, usSpinnerService){
$scope.startSpin = function(){
usSpinnerService.spin('spinner-1');
}
$scope.stopSpin = function(){
usSpinnerService.stop('spinner-1');
}
}]);
Note that when you specify a key, the spinner is rendered inactive.
You can still render the spinner as active with the spinner-start-active parameter :
`html`
spinner-start-active is ignored if spinner-on is specified.
The spinner-key will be used as an identifier (not unique) allowing you to have several spinners controlled by the same key :
`html
... random html code ...
`
See online example on Plunker.
Released under the terms of MIT License.
1. Fork repo.
2. npm inpm run test
3. Make your changes, add your tests.
4. npm run build` once all tests are passing. Commit, push, PR.
5.