Page Loading entries are generally used by everyone. Its principle is very simple: place a text or image loading state in the page header, and load a piece of JS at the end of the page to hide it, that is, the simple Loading state bar implemented 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 width of the Loading entry, this Loading entry 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 you use jQuery's built-in animation effects, they are perfectly comparable to those of the browser's built-in status bar.
Let's take a look at the demo: address.
To get the progress bar on the demo, first introduce the jQuery framework (must be placed in the page header ).Label ). ThenTag start position placement:
The Code is as follows:
CSS can be written as follows:
The Code is as follows:
# Loading {
Width: 100px;
Height: 20px;
Background: # A0DB0E;
Padding: 5px;
Position: fixed;
Left: 0;
Top: 0;
}
# Loading p {
Width: 1px;
Height: 20px;
Background: # F1FF4D;
}
The preparations are now ready.
Next, please give full play to it at will, according to your understanding, in the appropriate position of each part of the template:
The Code is as follows:
