Home > Developer > JavaScript
JavaScript Implementation of Web page loading progress bar code is super simple, javascript progress bar
The webpage progress bar can better reflect the loading progress of the current webpage. The loading progress bar can be animated from 0% to 100% to complete the webpage loading process. However, the current browser does not provide an interface for page loading progress. That is to say, the page cannot return the actual page loading progress accurately. In this article, we use jQuery to implement the page loading progress bar effect.
HTML
First, we need to know that no browser can directly obtain the size of the object being loaded. Therefore, the data size cannot be used to load and display 0-100%.
Therefore, we need to use the line-by-line loading feature of html code to set nodes among several skip lines of the Code on the whole page and perform approximate fuzzy progress feedback to achieve the progress loading effect. Generally, the Progress (n) % is returned for each page loaded to a specified area. By setting multiple nodes, the page displays the loading progress step by step.
If there is a page that consists of four parts: page header, left content, right sidebar, and footer, we take these four parts as four nodes. When each node is loaded on the page, set the approximate loading percentage. The page structure is as follows:
<Div id = "header"> page header </div> <div id = "mainpage"> left content </div> <div id = "sider"> right sidebar </div> <div id = "footer"> footer </div>
Then we add progress bar. loading in the first line under <body>.
<div class="loading"></div>
CSS
We need to set the style of the loading progress bar, set the background color, height, position, priority, and so on.
. Loading {background: # FF6100; // sets the progress bar color height: 5px; // sets the progress bar height position: fixed; // sets the progress bar to scroll along with the screen top: 0; // fix the progress bar to the top of the page z-index: 99999 // raise the priority level of the progress bar to avoid being blocked by other layers}
JQuery
Next, we need to add a progress animation behind each node and implement it using jQuery.
<Div id = "header"> header </div> <script type = "text/javascript"> $ ('. loading '). animate ({'width': '000000'}, 50 ); // The First Progress node </script> <div id = "mainpage"> content on the left </div> <script type = "text/javascript" >$ ('. loading '). animate ({'width': '000000'}, 50 ); // Second Progress node </script> <div id = "sider"> right sidebar </div> <script type = "text/javascript" >$ ('. loading '). animate ({'width': '000000'}, 50 ); // The Third Progress node </script> <div id = "footer"> footer </div> <script type = "text/javascript"> $ ('. loading '). animate ({'width': '000000'}, 50); // The Fourth Progress node. </script>
It can be seen that after a node is not loaded, jQuery calls the animate () animation method to change the width of the progress bar. Each node changes to 50 milliseconds to make the progress bar look smoother, finally, the progress bar is animated from 0% to 100%.
When the progress bar reaches 100%, the page is loaded. The last step is to hide the progress bar.
$(document).ready(function(){ $('.loading').fadeOut(); });
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
