간단한 프레시그바

 

 

• html

<div class="loding-box">
     <span class="num">0</span>
     <div class="progress-view">
        <div class="progressbar"></div>
     </div>
</div>

• css

.loding .loding-box{
    margin: auto auto;
    width:20rem;
    height: 5rem;  
}
.loding .loding-box .num{
    display:block; 
    position: relative;
    margin-left: -2rem;
    left:0rem;
    top:-1.5rem;
    width:2rem;
}
.loding .loding-box .num::after{
    position: absolute;
    content: "";
    left:100%;
    top:110%;
    width:.05rem;
    height: 1rem;
    background-color: #222;
}


.loding .loding-box .progress-view {
    overflow:hidden;
    margin: 0 auto;
    width:20rem;
    height:1rem;
    border: 1px solid #ccc;
}

.loding .loding-box .progress-view .progressbar{
    width:0%;
    height:100%;
    background-color: #f7e600;
    
}

• js

	function progress(){
		let i=0;
		setInterval(function(){
			if(i < 100){ //100이 될때까지
					let vol = i+1;
					num.text(vol+'%');// 1씩 증가//
					
					if( vol > i){		
                    	//진행에 따라 숫자가 따라 움직임//
                        // div의 width가 200이라서 이동거리가 2배씩 늘어나기//
						num.animate({left: vol*2},10); 
						progressbar.animate({width: vol*2},10);
					}
					i=vol;
				}
			},20);
	}