Jquery page loading progress bar

Jquery page loading progress bar

Page loading entries are generally used by everyone. The principle is simple: place a text or image loading state in the page header, and load a section of JavaScript code at the end of the page.
Hide, that is, the simple loading status bar based on the loading sequence of the browser.

Demonstrate the loading sequence of traditional WordPress templates in the browser. The appearance and disappearance of loading entries are distributed at the beginning and end.

If we place multiple JavaScript codes in different locations on the page, and each JS is used to gradually increase the loading Bar Width, then this loading
Will undoubtedly be more practical. To some extent, it relieves the boring feeling of visitors waiting for loading, and objectively reflects the page loading progress. If jquery is used again
The built-in animation effect is comparable to the state bar of the browser.

Let's take a look at the demo:Address.

To obtain the progress bar on the demo,First, Introduce jquery
Framework (must be placed in the header of the page

<Div
Id = "loading"> <div> </div>

CSS can be written 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 preparations are now ready.

Next, Please try it out at will. Based on your understanding of Figure 2, place the following in the appropriate positions of each part of the template:

<Script
Type = "text/JavaScript">
$ ("# Loading Div"). animate ({width: "16px "})
</SCRIPT>

The red value should gradually increase with the loading order until footer. php. In addition, do not forget to put it at the end of footer. php:

<Script
Type = "text/JavaScript">
$ ("# Loading"). fadeout ()
</SCRIPT>

Used to hide the progress bar after loading.

Source code:

loading status bar

your browser does not support JavaScript