Is that possible to freeze the page with overlay during load

[prabhum07]

What version of angular-loading-bar are you using? 0.9.0

What version of AngularJS are you using? 1.5.8

What browsers are affected? Not specific since it is an improvement

Please provide either a JSFiddle, Plunkr example that replicates the issue Not available

Please describe the issue Is that possible to freeze the page while spinner is available in the page?

What did you expect to happen? The page should be freezes with and overlay during the spinner load (i.e when the request is in progress, it should not allow to click an element)

What actually happened? Able to click the background links

[apmeena]

You can try this

cfpLoadingBarProvider.includeBar = false;
cfpLoadingBarProvider.spinnerTemplate = '<div  style="z-index:9999;height:100%;width:100%;background:rgba(0,0,0,0.5);position:absolute;"><div style="position:absolute;top:40%;left:50%;font-size:20px;"><img src="images/loading.gif"></div></div>';

[akashpjames]

This change will add a mask whenever the loading spinner appears and will prevent the user from additional operations till the loading is complete.

Add a specific css for the spinnerTemplate like this,

this.spinnerTemplate = '<div id="loading-mask"><div id="loading-bar-spinner"><div class="spinner-icon"></div></div></div>';

and add the corresponding css,

#loading-mask {
  position: fixed;
  z-index: 1051;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}