간단한 jquery 진행률 표시줄 example_jquery

10줄 미만의 코드로 jQuery로 구현된 가장 간단한 진행률 표시줄입니다. 스타일을 직접 무시할 수 있습니다. (직접 찾아야 할 사진이 있습니다)

[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%

< /div>