1.0.0 • Published 8 years ago
sarsha-loading-spinner v1.0.0
angular-loading-spinner
Loading spinner for AngularJS
DEMO: https://msarsha.github.io/angular-spinner/
Install:
npm i sarsha-loading-spinner --save
Build:
Clone the repo and run npm install
to install dependencies and then gulp
to build;
Dependencies:
angular-animate
Setup:
add spinner module as dependency
angular.module('app', ['sarsha.spinner'])
load angular-animate in your html
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
How to use:
Use the default spinner template
<div>
Your content here
<sarsha-spinner name="spinner1"></sarsha-spinner>
</div>
Use your own template:
<div>
Your content here
<sarsha-spinner name="spinner1">
<div>
<span>MY OWN TEMPLATE !!</span>
</div>
</sarsha-spinner>
</div>
Place as many spinners as you like
<div>
Your content here
<sarsha-spinner name="spinner1"></sarsha-spinner>
</div>
<div>
Your content here
<sarsha-spinner name="spinner2"></sarsha-spinner>
</div>
Controlling the Spinners
Manualy control the spinners using the spinnerService
angular.controller('ctrl', function(spinnerService){
this.doSomething = function(){
spinnerService.show('spinner1');
// or to show all
spinnerService.showAll();
}
this.dontDoSomething = function(){
spinnerService.close('spinner1');
// or to close all
spinnerService.closeAll();
}
})
Let the spinnerHttpInterceptor
control the spinners
Add the spinnerHttpInterceptor
to your module config
angular
.module('app', [])
.config(function($httpProvider){
$httpProvider.interceptors.push('spinnerHttpInterceptor');
})
The default behavior of the spinnerHttpInterceptor
is to show and close all existing spinners.
You can tell it which spinner is related to the http request by adding the spinner
object to the $http
config.
The spinner
object can be either a string
for a single spinner or an Array
for number of spinners.
angular.controller('ctrl', function($http){
this.doSomething = function(){
$http.get('http://url.com', {
spinner: 'spinner1'
})
}
this.doSomething = function(){
$http.get('http://url.com', {
spinner: ['spinner1', 'spinner2']
})
}
})
1.0.0
8 years ago