I used Google, the request was like in the headline, but in the heap of articles I found, I could not find a script that would reflect the page loading process.

What method is used to track whether the page is loaded or not, its state?
I just want to find out if there is a way to track the percentage of it loaded, and I can tie it up visually and in css.

It is clear that you can make a stub that will hang for 4 seconds and load from 0 to 100%, but if the Internet is bad and the download will take 4 times longer.

I will be grateful for the ready-made solution (strip from 0-100%)

Answer 1, authority 100%

As for stubs, they are implemented as looped animations just so that there is no explicit end.

As for the real loading indicator, personally I know only one way –

• load everything with XMLHttpRequest and use its progress event.

And the most important thing to remember is that not all people like the Aria group. I mean, not everyone can appreciate the complexity of the implementation of a real loader and many may not even like it. Moreover, we must not forget that there are applications that really need a loader, and there are those in which it is absolutely impossible to use it. It is more important for the user to see the content for which he comes as quickly as possible, and not the progress of the download.

UPD: 0.0.1

Regarding the stub … To show the stub only until the page is fully formed, use events.

If you want the user to see the generated page as quickly as possible, use the DOMContantLoaded event, which is sent when all scripts are loaded and the dom is fully formed so that you can already refer to it. The only thing that does not have time to load is the link images, which are indicated in the html markup. This is suitable in 90% of cases, in which a beautiful plug is put in their place, signaling that there will be images soon.

In cases where the image is part of the application, that is, as in the case of the background on the main page, use the load event, which is sent when the scripts are loaded, dom formed and all pictures loaded.

Separately, it should be said that scripts of js libraries are added at the end of the body block, and document is subscribed to the event.

Answer 2

It depends on how the page is loaded:

var step = 0; // number of steps performed
var total_step = 0; // number of steps in total
var width = 100 // width of the progress bar when it is full
function initJS () {
  step + = 1;
  ... processing ...
  total_step + = 1;
}
function initSomethingElse () {
  step + = 1;
  ... processing ...
  total_step + = 1;
}
function updatePBar () {
  $ ('# somePBar'). css ('width', total_step / step * width + 'px'); // set the width of the progress bar from the number of steps performed
}
function initAll () {
  setInterval (updatePBar (), 100); // update the progressbar every 0.1 second
  initJS ();
  initSomethingElse ();
  init ...
}
initAll ();