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

<scriptsrc="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-spinnername="spinner1"></sarsha-spinner></div>

Use your own template:

<div>
Your content here
<sarsha-spinnername="spinner1"><div><span>MY OWN TEMPLATE !!</span></div></sarsha-spinner></div>

Place as many spinners as you like

<div>
Your content here
<sarsha-spinnername="spinner1"></sarsha-spinner></div><div>
Your content here
<sarsha-spinnername="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 allspinnerService.showAll();}this.dontDoSomething=function(){spinnerService.close('spinner1');// or to close allspinnerService.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']})}})