Js progress bar control implementation

This article introduces: js progress bar control implementation first defines a p embedded with a span:

                10%          

Then use css to complete the style of the progress bar:

p#loadbar{              width:300px;              background-color: silver;              border:1px solid salmon;              text-align: center;              border-radius:8px ;          }          #bar{              display: block;              font-family: arial;              font-size: 12px;              background-color: sandybrown;              text-align: center;              padding: 5px;              border-radius:5px ;                         }

Finally, use js to control the progress bar:

var i=0;       function startbar(){          var showbar=setInterval("setbar()",1000);      }      function setbar(){          console.log("setbar");          i+=5;          if(i>=100)          {               clearInterval(showbar);          }          document.getElementById("bar").style.width=i+"%";          document.getElementById("bar").innerHTML=i+"%";      }            startbar();

The effect is as follows:

For more articles on js progress bar control implementation, refer to PHP Chinese website!