An example of a simple jquery progress bar _jquery

The simplest progress bar implemented with jquery is less than 10 lines of code. Styles can be ignored directly. (Have a picture to find out for yourself)

[CSS] Code

Copy Code code as follows:

$ (function () {
var i=0;
(function ProgressBar () {
i=i+1;
if (i>=101) {
i=0;
}
$ ("#proc"). Animate ({width:i+ "%"},500);
$ ("#progressWord"). Text (i+ "%");
SetTimeout (progressbar,1500);
})();
});

[CSS] Code

Copy Code code as follows:

. progress_out{
position:relative;
border:1px solid #3c4d60;
-webkit-box-shadow: #666 0px 0px 3px;
-moz-box-shadow: #666 0px 0px 3px;
Box-shadow: #666 0px 0px 3px;
width:200px;
height:40px;
}
. progress_inner{
Background-color: #DADAE4;
width:100%;
height:40px;
}
. progress_word{
Position:absolute;
left:50%;
top:24%;
Font-weight:bold;
}

[HTML] Code

Copy Code code as follows:

<div id= "Outdiv" class= "Progress_out" >
<div id= "ProgressBar" class= "Progress_inner" >

</div>
<div id= "Progressword" class= "Progress_word" >0%</div>
</div>