jQuery page loading progress bar implementation code_jquery

The above picture shows the loading sequence of traditional Wordpress templates in the browser. The appearance and disappearance of the Loading bar are distributed at the beginning and end.

If we place multiple JS at different locations on the page, and each JS is used to gradually increase the width of the Loading bar, then this Loading bar will undoubtedly have more practical value. It alleviates the boredom of visitors waiting for loading to a certain extent, and can also objectively reflect the progress of page loading. If coupled with jQuery's built-in animation effects, it can be completely comparable to the status bar that comes with the browser.
Let’s take a look at a demo first: address.
To get the progress bar effect on the demo, first, introduce the jQuery framework (must be placed in the header tag). Then place it at the starting position of the tag:

Copy the code The code is as follows:

CSS can be written like this:

Copy code The code is as follows:

#loading {
width:100px;
height:20px;
background:#A0DB0E ;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}

The preparation work is done here.
Then, please feel free to use it as you like. According to your understanding of Figure 2, place it in the appropriate position of each part of the template:

Copy the code The code is as follows:

The red value should gradually increase with the loading order until footer.php. Also don’t forget to put at the end of footer.php:

Copy the code The code is as follows:

is used after loading is complete Hide the progress bar.