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.
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:
Post a Comment