如何製作反映逐步形式進度的jQuery/css進度欄？

Question

我看到很多示例進度條顯示進度條被填滿。但是，我只想知道我如何才能讓進步反映一步一步的進展。我想要的一個很好的例子可以看到Here。任何有用的代碼或來自其他頁面的示例/演示將是很好的。

謝謝！

Answer 1

如果你喜歡布法羅的一個，只要看看他們這樣做。

首先它們限定一個div像這樣：

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

然後他們使用CSS來呈現基於所述進度在div（其與類=「S1」等控制）。

/** 
* 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操縱圖像顯示所需的狀態