Angular Loading spinner or Preloading image with finally

This tutorial help to loading pre-loading image using finally, Here i am taking one step ahead and adding same functionality for angular application using AngularJS for spinner.
Angular is popular and powerful tool for frontend UI which has predefined directive that will help to improve you HTML page performance. We are using ngshow directive for show and hide image.

You can also check other tutorial of angular,

Option 1 :

There are following Steps to add Loading spinner on page using without any plugin.

Step 1: Defined a variable $scope.loader = true; in starting service function.
Step 2: Added html on dashboard template

Step 3: Added ng-show on target div(where data will load).

Step 4: Hide loader on service finally callback method.

.finally(function() { // called no matter success or failure
$scope.tempLoader = false;

Option 2 :

Spinner using Angular directive

Angular directive for ajax loading indicator. This directive uses .Detects any ajax request and shows the spinner.

Download Angular Loading Spinner

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.