Web page progress bar to better respond to the current page loading progress, loading progress bar can be animated from the beginning 0% to 100% to complete the process of loading the page. However, the current browser does not provide the interface of the page loading progress, which means that the page can not accurately return the actual loading of the page, this article we use jquery to achieve the page load progress bar effect.
Html
The first thing we need to know is that no browser is currently able to get the size of the object being loaded directly. So we can't implement the 0-100% loading display process by the data size.
Therefore, we need to use the HTML code-by-line loading characteristics, in the whole page of the number of jump lines to set the node, the approximate fuzzy progress feedback to achieve the effect of progress loading. The general meaning is: the page is loaded to the specified area, then return (n)% of the progress results, by setting multiple nodes, to achieve step-by-step to show the purpose of loading progress.
If there is a page, according to the block divided into the page header, the left side, the right side of the sidebar, footer four parts, we put these four parts as four nodes, when the page load each node, set the approximate load percentage, the page structure is as follows:
<div id= "header" > header section </div> <div id= "mainpage" > left content </div> <div id= "Sider" > right sidebar </div> <div id= "Footer" > footer section </div>
Then we add the progress bar to the first line under <body>. Loading.
<div class= "Loading" ></div>
Css
We want to set the style of the loading progress bar, set the background color, height, and position, priority and so on.
. loading{
Background: #FF6100; Set the color of the progress bar
height:5px; Set the height of the progress bar
position:fixed; Set progress bar Follow screen scrolling
top:0; Secure the progress bar at the top of the page
z-index:99999//Improve the priority level of the progress bar to avoid being obscured by other layers
}
Next, we're going to add a progress animation behind each node and use jquery to implement it.
<div id= "header" > page header </div> <script type= "Text/javascript" > $ ('. Loading '). Animate ({' width ': ' 33% '},50 '); //first Progress node </script> <div id= "mainpage" > left content </div> < Script type= "Text/javascript" > $ ('. Loading '). Animate ({' width ': ' 55% '},50); //second Progress node </script> <div id= "sider" > right sidebar </div> & Lt;script type= "Text/javascript" > $ ('. Loading '). Animate ({' width ': ' 80% '}, //Third Progress node </script> <div id= "footer" > footer section </div>&
nbsp <script type= "Text/javascript" > $ ('. Loading '). Animate ({' width ': ' 100% '} //Fourth Progress node </SCRIPT> As you can see, when a node is not loaded, jquery calls the Animate () animation method to achieve a change in the width of the progress bar, with each node changing in 50 milliseconds to make the progress bar look smoother, eventually changing from 0% to 100%, completing the progress bar animation.
When the progress bar reaches 100%, the page loads, and finally one more step to do is to hide the progress bar.
$ (document). Ready (function () {
$ ('. Loading '). fadeout ();
});
See demo demo, at the top of the demo page there will be a red progress bar to indicate the progress of the page load.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
