Implementation of CSS3 and HTML5 web page loading progress bar

This article mainly introduces the implementation of HTML5 CSS3 web page loading progress bar. The code example of downloading progress bar has certain reference value. Those who are interested can learn about it.

Today I bring you a cool progress bar. The progress bar gives users a better experience in a time-consuming operation. It will not make users feel like they are waiting blindly. For long periods of time without a progress bar, Wait, the user will freeze the task and close the application without hesitation; it is generally used for downloading tasks, deleting a large number of tasks, loading web pages, etc.; if HTML5 is used for mobile phone layout, it can also be used on mobile phones~

Rendering:

1. HTML structure:

##

<p id="loadBar01" class="loadBar">  
       <p>  
            <span class="percent">  
               <i></i>  
            </span>  
       </p>  
       <span class="percentNum">0%</span>  
   </p>

Brief analysis:

p.loadBar represents the entire progress bar

p.loadBar p sets the rounded table frame, p.loadBar p span is the progress (dynamically changing width), p.loadBar p span i fills the background color for the progress (i.e. width=100%)

HTML structure, you can design it yourself, as long as it is reasonable, there is no problem~

2, CSS:

body  
       {  
           font-family: Thoma, Microsoft YaHei, 'Lato', Calibri, Arial, sans-serif;  
       }  
  
       #content  
       {  
           margin: 120px auto;  
           width: 80%;  
       }  
  
       .loadBar  
       {  
           width: 600px;  
           height: 30px;  
           border: 3px solid #212121;  
           border-radius: 20px;  
           position: relative;  
       }  
  
       .loadBar p  
       {  
           width: 100%;  
           height: 100%;  
           position: absolute;  
           top: 0;  
           left: 0;  
       }  
  
       .loadBar p span, .loadBar p i  
       {  
           box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .4);  
           width: 0%;  
           display: block;  
           height: 100%;  
           position: absolute;  
           top: 0;  
           left: 0;  
           border-radius: 20px;  
       }  
  
       .loadBar p i  
       {  
           width: 100%;  
           -webkit-animation: move .8s linear infinite;  
           background: -webkit-linear-gradient(left top, #7ed047 0%, #7ed047 25%, #4ea018 25%, #4ea018 50%, #7ed047 50%, #7ed047 75%, #4ea018 75%, #4ea018 100%);  
           background-size: 40px 40px;  
       }  
  
       .loadBar .percentNum  
       {  
           position: absolute;  
           top: 100%;  
           right: 10%;  
           padding: 1px 15px;  
           border-bottom-left-radius: 16px;  
           border-bottom-right-radius: 16px;  
           border: 1px solid #222;  
           background-color: #222;  
           color: #fff;  
  
       }  
  
       @-webkit-keyframes move  
       {  
           0%  
           {  
               background-position: 0 0;  
           }  
           100%  
           {  
               background-position: 40px 0;  
           }  
       }

The effect at this time is:

The overall layout is to use position relative and absolute ~

The more difficult part is the implementation of the gradient bar:

We use

a, the gradient from the upper left to the lower right,

b, and the color They are: 0-25% is #7ed047, 25%-50% is #4ea018, 50%-75% is #7ed047, 75%-100% is #4ea018

c, and the background size is 40px 40px is sufficient if this setting exceeds the height. The larger it is, the wider the width of the article

Analysis diagram:

The setting principle is as shown in the picture above, and the background width can also be used The larger the setting, the larger the width of the article;

3. Set Js and create a LoadBar object

function LoadingBar(id)  
       {  
           this.loadbar = $("#" + id);  
           this.percentEle = $(".percent", this.loadbar);  
           this.percentNumEle = $(".percentNum", this.loadbar);  
           this.max = 100;  
           this.currentProgress = 0;  
       }  
       LoadingBar.prototype = {  
           constructor: LoadingBar,  
           setMax: function (maxVal)  
           {  
               this.max = maxVal;  
           },  
           setProgress: function (val)  
           {  
               if (val >= this.max)  
               {  
                   val = this.max;  
               }  
               this.currentProgress = parseInt((val / this.max) * 100) + "%";  
               this.percentEle.width(this.currentProgress);  
               this.percentNumEle.text(this.currentProgress);  
  
  
           }  
       };

We create A LoadBar object is created and two methods are exposed at the same time, one to set the maximum progress and the other to set the current progress; for example, the maximum progress of downloading a file is the file size, and the current progress is the size of the downloaded file.

4. Test

Finally we test our code:

$(function ()  
     {  
  
         var loadbar = new LoadingBar("loadBar01");  
         var max = 1000;  
         loadbar.setMax(max);  
         var i = 0;  
         var time = setInterval(function ()  
         {  
             loadbar.setProgress(i);  
             if (i == max)  
             {  
                 clearInterval(time);  
                 return;  
             }  
             i += 10;  
         }, 40);  
     });

The above is The entire content of this article is hoped to be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use CSS3 pseudo-elements to achieve a gradually glowing grid border

Using CSS How to add an asterisk to the required form items

CSS3 and Javascript to achieve the effect of the progress bar

The above is the detailed content of Implementation of CSS3 and HTML5 web page loading progress bar. For more information, please follow other related articles on the PHP Chinese website!