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

Answer 1

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.