Sometimes we need to block website UI while loading data in Ajax. For this purpose you might have prefer some plugins, but its easy to create this functionality with AngulaJS and CSS3. Here we are going  to implement this

Align loading style div or GIF to the middle of page

Make this div as absolute in position. 
Left position : calc (50% - (width of loading div/2))
Right position : calc (50vh - (height of loading div/2))
It should be displayed on top of all elements, So give maximum possible z-index.

Observe below CSS
#blockUiDiv {
    background-color: transparant;
    width:194px;
    height:194px;
    position:absolute;
    left:calc(50% - 97px);
    top:calc(50vh - 97px);
    display:none;
    z-index: 20001;
}

#blockUiDiv img {
    width:194px;
    height:194px;
}

The above loading div covers only small amount of area. But we have to block entire screen. So we need backdrop for this div. This backdrop should cover entire screen, So make this as fixed at (0,0)  with 100% width and 100vh height. z-index of this backdrop must be less than above loading div

Observe below CSS
#blockUiBackdrop {
    height: 100vh;
    width: 100%;
    z-index: 20000;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.5;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    display:none;
}

HTML Code

The below highlighted variable is responsible for blocking and unblocking UI
<div id="blockUiDiv" ng-show="showBlockUI">
  <img src="wave.svg"/>
</div>
<div id="blockUiBackdrop" ng-show="showBlockUI">
</div>

Block UI and unBlock UI

The below functions represent block and unblock UI functionalities
$scope.blockUI = function() {
        $scope.showBlockUI = true;
        $scope.$apply();
};

$scope.unBlockUI = function() {
        $scope.showBlockUI = false;
        $scope.$apply();
};

Trigger ajax call

This below function blocks UI before it trigger AJAX call and unblock ui after completing ajax call
$scope.triggerAjaxCall = function(delay) {
    $scope.blockUI();
    $http.get('/GetDelayedText?milliSeconds='+delay).
     success(function(data, status, headers, config) {
        alert(data);
        $scope.unBlockUI(); 
     }).error(function(data, status, headers, config) {
        alert(data);
        $scope.unBlockUI();
     }); 
};

Handling multiple ajax calls

If we trigger multiple calls at a time, then it should not unblock UI for other ajax call. Take one global variable and increment it when ajax call triggered, decrement it when ajax call end. Find below for code
$scope.blockUiVar = 0;
    
$scope.blockUI = function() {
    if($scope.blockUiVar == 0) {
        $scope.showBlockUI = true;
        $scope.$apply();
    }
    $scope.blockUiVar++;
};

$scope.unBlockUI = function() {
    if($scope.blockUiVar == 1) {
        $scope.showBlockUI = false;
        $scope.$apply();
    }
    $scope.blockUiVar--;
};

0 comments:

Blogroll

Popular Posts