A simple example of a jquery progress bar
- 2020-03-30 02:44:45
- OfStack
The simplest progress bar implemented in jQuery is less than 10 lines of code. Styles can be ignored directly. (I need to find one picture by myself.)
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/20140428092055.jpg? 201432892422 ">
The CSS code
$(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);
})();
});
The CSS code
.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
<div id="outDiv" class="progress_out">
<div id="progressbar" class="progress_inner">
<img id="proc" src="/cdr/images/resource/processBar.png" width=0 height=40px />
</div>
<div id="progressWord" class="progress_word">0%</div>
</div>