단계별 진행 과정을 반영하는 jquery/css 진행 막대를 만들려면 어떻게해야합니까?

Question

진행률 표시 줄이 채워지는 예제 진행률 막대가 많이 있습니다. 그러나, 나는 진보를 단계적 진보에 의해 단계적으로 반영 할 수있는 방법을 알고 싶다. 내가 원했던 좋은 예가 Here입니다. 다른 페이지의 도움이되는 코드 또는 예제/데모는 유용 할 것입니다.

감사합니다.

Answer 1

버팔로가 마음에 드시면 은 (는)입니다.

먼저 그들은이 같은 사업부를 정의

<div id="progress"> 
    <div id="complete" class="s1"> 
     <div id="marker"></div> 
    </div> 
</div> 

그런 다음 그들이 (그래서 클래스 = "S1"과 함께 제어) 진행 상황에 따라 사업부를 렌더링하기 위해 CSS를 사용합니다.

/** 
* PROGRESS 
*/ 
#progress,#complete { 
    width: 520px; 
    margin: 1px 0 19px; 
    height: 32px; 
    background:url(/img/backgrounds/progress.png); 
    position:relative; 
} 
#complete { 
    background-position: 0px 57px; 
    margin-top: 0; 
} 
#complete #marker { 
    position: absolute; 
    top: 0; 
    right: -26px; 
    background:url(/img/backgrounds/markers.png); 
    width: 26px; 
    height: 32px; 
} 
#progress .s1 { 
    width: 19px; 
} 
#progress .s2 { 
    width:111px; 
} 
#progress .s3 { 
    width:203px; 
} 
#progress .s4 { 
    width:295px; 
} 
#progress .s5 { 
    width:386px; 
} 
#progress .s6 { 
    width:478px; 
} 
#progress .s2 #marker { 
    background-position: -26px 0; 
} 
#progress .s3 #marker { 
    background-position: -52px 0; 
} 
#progress .s4 #marker { 
    background-position: -78px 0; 
} 
#progress .s5 #marker { 
    background-position: -104px 0; 
} 
#progress .s6 #marker { 
    background-position: -130px 0; 
} 

CSS의 원하는 상태