Ein einfacher JQuery-Fortschrittsbalken example_jquery

Der einfachste mit jQuery implementierte Fortschrittsbalken mit weniger als 10 Codezeilen. Der Stil kann direkt ignoriert werden. (Es gibt ein Bild, das Sie selbst finden müssen)

[CSS]-Code

Code kopieren Der Code lautet wie folgt:

$(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

Code kopieren Der Code lautet wie folgt:

.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- Gewicht: fett ;
}

[HTML] Code

Code kopieren Der Code lautet wie folgt:

< div id= "outDiv" class="progress_out">

0%

< /div>