A simple jquery progress bar example_jquery

The simplest progress bar implemented with jQuery, with less than 10 lines of code. The style can be ignored directly. (There is a picture that you need to find yourself)

[CSS] Code

Copy code The code is 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 The code is 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 The code is as follows:

0%

< /div>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn