Show angular-loading-bar And disable all contents of the page until page loads

Question

I have lots of ASP.NET Pages and server database connection.They takes some time to load fully when requested from server to client. Now I want to show a angular-loading-bar until page loads.. It is working fine. But i want to disable the page at the time loading page. Please see this link which i used for
anulgar-loading-bar example link
Please help me.
Thanks in advance.

Andrew · Answer 1 · 2016-10-07T14:17:45.343

22

I am a huge fan of angular-loading-bar.

No overlay by default, but you can easily tweak the loading-bar with this bit of CSS;

#loading-bar {
  pointer-events: all;
  z-index: 99999;
  border: none;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  cursor: wait;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.6);
}

Here is a demo.

edited Oct 07 '16 at 14:17

answered Feb 03 '16 at 18:21

Andrew

7,848
1
26
24

Super clean. Nice solution. – Adam S Jul 12 '16 at 16:09
Awesome, I was able to get rid of the spin wheel thnx to the cursor: wait css! – RandomUs1r May 11 '17 at 21:44
Thanks a lot! I used your solution but with ngProgress BAr, and it worked like a charm. – tarekahf Aug 16 '17 at 22:36

score 10 · Answer 2 · answered Jan 09 '14 at 07:44

10

I actually wrote a block ui module for angular a few days back that does this trick. It should work hand in hand with that nice looking loading bar.

answered Jan 09 '14 at 07:44

null

7,906
3
36
37

score 0 · Answer 3 · edited May 23 '17 at 12:26

0

I am not sure if I understand your question 100%. Can't you just overlay a div (may be gray - to show it's disable), and display the loading bar/gif?

Overlaying a div would be quite simple and you can find many resources like, How to overlay one div over another div overlay a div over another one with css

edited May 23 '17 at 12:26

Community

1
1

answered Jan 09 '14 at 06:28

Tharaka

2,355
1
20
22

I can able to show angular loading bar until it get a response from server db. Now i want to block the UI of html page until it loads the data from server. – Seetha Jan 09 '14 at 06:35

score 0 · Answer 4 · answered Aug 16 '17 at 22:42

Here is my solution based on solution by @andrew above and using ngProgress Bar component.

CSS:

#ngProgress-container.block-editing {
    pointer-events: all;
    z-index: 99999;
    border: none;
    /* margin: 0px; */
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    cursor: wait;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.33);
    margin-top:10px;
    #ngProgress {
        margin-top:-9px;
        width:5px; /* Force display progress as early as possible */
        opacity:1; /* Force display progress as early as possible */
    }
}

JS - in the beginning:

$scope.progressbar = ngProgressFactory.createInstance();
//To force display of progress bar as early as possible
$scope.progressbar.setParent(document.getElementsByTagName("BODY")[0]);
$scope.progressbar.set(1);
$scope.progressbar.getDomElement().addClass('block-editing');
$scope.stopProgressbar = $timeout(function(){
    $scope.progressbar.setParent(document.getElementsByTagName("BODY")[0]);
},10);
$timeout(function(){
    $scope.progressbar.start();
},100);

JS - in the end:

//Stop progress bar
$interval.cancel($scope.stopProgressbar);
$timeout(function(){
    //JIRA: NE-2984 - un-block editing when page loading is done
    $($scope.progressbar.getDomElement()).fadeOut(2000, function() {
        $($scope.progressbar.getDomElement()).removeClass('block-editing');
    });
    $scope.progressbar.complete();
}, 3000);

Show angular-loading-bar And disable all contents of the page until page loads

4 Answers4

Linked