Angularjs Progress bar directive for entire application

Progress bar for Angularjs application by using directives is simple and real easy. I was googling and could not found any directive way, if you will check most of the people says before call the http method open the progress bas and close once you get the result or get any error. Do you think it is good way to write the code in every http request, I don't like it. What ever we are going to create will work with synchronous http request as well as asynchronous request.

Let's see some suggestions from different web sites, hope it will not disturbed you :)

<div id="mydiv">
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>

// JavaScript to show and hide
$('#mydiv').show(); 
$('#mydiv').hide();

Showing Spinner GIF during $http request in angular (stackoverflow), got 46 up vote, viewed 88,000 times :)

Do you want to use the above code your application, hope No. So let's create our simple directive in our app.js file

var app = angular.module('MyApp', ['ui.router', 'ui.bootstrap']);
app.config([..... funtion(....){
    ...............
    ...............
}]);
app.directive('loading', ['$http', function ($http) {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
            scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };
            scope.$watch(scope.isLoading, function (v) {
                if (v) {
                    elm.show();
                } else {
                    elm.hide();
                }
            });
        }
    };
}]);

• loding : name of directive
• restrict: 'A' means it is an attribute directive
• Check if there is any http pending request '$http.pendingRequests.length > 0'
• If any pending request set isLoading = true;
• Use $watch to check the value of isLoading
• If true show otherwise hide

Interesting part is the html, we only want one div that's it, If you are thinking where is the progress image, then control your horses, we will add that inside the CSS class, here is the complete HTML

<div class="loading-dialog" data-loading>            
</div>

Put this code somewhere on you index.html page, now see the loaging-data class

.loading-dialog {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 0, 0, 0, .2 ) url('../images/loading.gif') 50% 50% no-repeat;
}

What this class will do:

• Hide the progress by default
• Add an image inside it
• Position the progress to the center of the page
• Move it on top by using z-index
• Transparent background see rgba(0,0,0, .2), the last .2 is the opacity, if you want more dark back ground then increase it
• Cover the entire page by using 100% width and height

This is only the code you need to play the wait progress. If you note I am adding image from CSS by using the backgound: url('../images/loading.gif') and positioning the image to the center of the page. so you need a an image to play, if your image folder is not on the root folder then you can change the URL path accordingly.

Other blogs you may like

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to... By Ali Adravi   On 14 Aug 2015  Viewed: 20,837

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi   On 06 Aug 2015  Viewed: 57,508

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the... By Ali Adravi   On 29 Jul 2015  Viewed: 19,499

Custom Directives in AngularJS with example and demo

Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are... By Ali Adravi   On 29 Jul 2015  Viewed: 4,471

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We... By Ali Adravi   On 28 Jul 2015  Viewed: 31,236