Une simple barre de progression jquery example_jquery

La barre de progression la plus simple implémentée avec jQuery, avec moins de 10 lignes de code. Le style peut être ignoré directement. (Il y a une photo que vous devez trouver vous-même)

[CSS] Code

Copier le code Le code est le suivant :

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

Copier le code Le code est le suivant :

.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;
largeur : 100 %;
hauteur : 40px;
}
.progress_word{
position:absolute;
gauche:50%;
haut:24%;
police- poids : gras ;
}

[HTML] Code

Copier le code Le code est le suivant :

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

0%

< /div>