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 • Principal Software Engineer @Chargebee 👨‍💻• I write about web development & behinds the scenes of startup/side projects that I'm building

© 2022 Nesin Technologies LLP