シンプルな JQuery プログレスバー example_jquery

jQuery で実装された最も単純なプログレス バー。コードは 10 行未満です。スタイルは直接無視できます。 (自分で見つけてください)

[CSS] コード

コードをコピー コードは次のとおりです:

$(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] コード

コードをコピー コードは次のとおりです:

.progress_out {
位置:相対;
ボーダー:1px ソリッド #3c4d60;
-webkit-box-shadow: #666 0px 0px 3px;
-moz-box-shadow: #666 0px 0px 3px;
ボックスシャドウ: #666 0px 0px 3px;
幅:200px;
高さ:40px;
}
.progress_inner{
背景色: #DADAE4;
幅: 100 %;
高さ: 40px;
}
.progress_word{
位置:絶対;
左:50%;
上:24%;
フォント-重量: 太字 ;
}

[HTML] コード

コードをコピー コードは次のとおりです。

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

0%