JarCastingangular-spinner
Angular directive to show an animated spinner (using spin.js)
Copyright (C) 2013, 2014, 2015, 2016, 2017 Uri Shaked, Islam Attrash and contributors
Usage
Get angular-spinner
- via npm: by running
$ npm install angular-spinnerfrom your console
Include angular-spinner.js in your application.
import 'angular-spinner';
OR:
require('angular-spinner');
OR by picking one of the following files (minified/not-minified):
<script src="node_modules/angular-spinner/dist/angular-spinner.js"></script>
<script src="node_modules/angular-spinner/dist/angular-spinner.min.js"></script>
Add the module angularSpinner as a dependency to your app module:
var myapp = angular.module('myapp', ['angularSpinner']);
You can now start using the us-spinner directive to display an animated spinner. For example :
<span us-spinner></span>
You can also pass spinner options, for example:
<span us-spinner="{radius:30, width:8, length: 16}"></span>
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:
<span us-spinner="{radius:30, width:8, length: 16}" spinner-on="showSpinner"></span>
Configuring default spinner options
You can use usSpinnerConfigProvider to configure default options for all spinners globally. Any options passed from a directive still override these.
myapp.config(['usSpinnerConfigProvider', function (usSpinnerConfigProvider) {
usSpinnerConfigProvider.setDefaults({color: 'blue'});
}]);
Themes
Themes provide named default options for spinners. Any options passed from a directive still override these.
myapp.config(['usSpinnerConfigProvider', function (usSpinnerConfigProvider) {
usSpinnerConfigProvider.setTheme('bigBlue', {color: 'blue', radius: 20});
usSpinnerConfigProvider.setTheme('smallRed', {color: 'red', radius: 6});
}]);
<span us-spinner spinner-theme="smallRed"></span>
Using the usSpinnerService to control spinners
<button ng-click="startSpin()">Start spinner</button>
<button ng-click="stopSpin()">Stop spinner</button>
<span us-spinner spinner-key="spinner-1"></span>
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):
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 :
<span us-spinner spinner-key="spinner-1" spinner-start-active="true"></span>
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 :
<span us-spinner spinner-key="spinner-1"></span>
<span us-spinner spinner-key="spinner-2"></span>
... random html code ...
<!-- This spinner will be triggered along with the first "spinner-1" -->
<span us-spinner spinner-key="spinner-1"></span>
Example
See online example on Plunker.
License
Released under the terms of MIT License.
Contributing
- Fork repo.
npm i- Make your changes, add your tests.
npm run testnpm run buildonce all tests are passing. Commit, push, PR.