How to Add Loading Spinners in AnguarJS

April 14, 2016

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');

👋 I'm Ashik Nesin • Sr. Frontend Engineer @Chargebee 👨‍💻• I write about modern Javascript & building web apps

© 2021 Nesin Technologies LLP