How to Add Loading Spinners in AnguarJS

As we all know loaders are used to indicate some process is happening. We'll see how to add spinner in Angular.

In this article, we are going to use angular-spinner directive.

We need to include those libraries in our app.

<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.8.1/angular-spinner.min.js"></script>

And then add angularSpinner module as a dependency for our app.

angular.module('app', ['angularSpinner']);

Now we need to place** us-spinner directive **in our view.

<span us-spinner="pageload"></span>

Automatically START spinner

<span us-spinner spinner-start-active="true"></span>

Start & Stop Spinner via Controller

usSpinnerService.spin('spinner-name');

usSpinnerService.stop('spinner-name');