Progress

用於進度顯示、統計數據。使用類別為 .progress 並以此為子元件前綴詞。.progress 主要作為容器與進度條的背景。.progress_bar 是 Progress 的主要顯示元件,顯示進度的長度與文字皆在這裡設定。


<div class="progress"> <div class="progress_bar" data-value="50%" style="width: 50%"></div> </div>

尺寸

透過將 .sz:sm.sz:sm 設定於 .progress 來選擇進度條的粗細,但不會顯示百分比字樣。


<div class="progress sz:sm"></div> <div class="progress sz:xs"></div>

條紋樣式與動態效果

.progress_bar 加上 .striped 可以顯示條紋圖樣。如果再加上 .is:on 會顯示動態效果。




<div class="progress"> <div class="progress_bar :striped"></div> </div> <div class="progress"> <div class="progress_bar :striped is:on"></div> </div>

配色

所有的顏色皆在 .progress_bar 加上 .clr:{*}。可使用基本色與色票群。

基本色

色票群







<div class="progress"> <div class="progress_bar clr:{*}"></div> </div>