Progress

預設樣式

Progress 的基本結構為外層的 <div class="progress"> 以及 <div class="progress-bar">,讀取進度可直接在 .progress-bar 上設定 width: 50%。Progress 較為特殊的地方在於任何樣式的 Class 都必須加在 .progress-bar上。

50%
<div class="progress">
    <div class="progress-bar" style="width: 50%;">50%</div>
</div>

尺寸

Progress 除了預設尺寸之外還有 .size-sm 一種小尺寸,只要在 .progress 加上 .size-sm 即可。

<div class="progress size-sm">
    <div class="progress-bar" style="width: 50%;"></div>
</div>

設定顏色

Progress 可以設定 .color-* 的所有配色,只要加上在 .progress-bar 加上 .color-* 即可。

<div class="progress color-primary">~略~</div>
<div class="progress color-secondary">~略~</div>
<div class="progress color-focus">~略~</div>
<div class="progress color-common">~略~</div>
<div class="progress color-success">~略~</div>
<div class="progress color-warning">~略~</div>
<div class="progress color-error">~略~</div>

另外還可以設定條紋樣式

<div class="progress progress-bar-striped">~略~</div>
<div class="progress progress-bar-striped color-primary">~略~</div>
<div class="progress progress-bar-striped color-secondary">~略~</div>
<div class="progress progress-bar-striped color-focus">~略~</div>
<div class="progress progress-bar-striped color-common">~略~</div>
<div class="progress progress-bar-striped color-success">~略~</div>
<div class="progress progress-bar-striped color-warning">~略~</div>
<div class="progress progress-bar-striped color-error">~略~</div>

只要在 .progress-bar 加上 .avtive 就會產生動畫效果。

<div class="progress progress-bar-striped active">~略~</div>
<div class="progress progress-bar-striped active color-primary">~略~</div>
<div class="progress progress-bar-striped active color-secondary">~略~</div>
<div class="progress progress-bar-striped active color-focus">~略~</div>
<div class="progress progress-bar-striped active color-common">~略~</div>
<div class="progress progress-bar-striped active color-success">~略~</div>
<div class="progress progress-bar-striped active color-warning">~略~</div>
<div class="progress progress-bar-striped active color-error">~略~</div>

一個 .pregress 裡可以放置多個讀取條。

<div class="progress">
    <div class="progress-bar progress-bar-striped active" style="width: 12%;"></div>
    <div class="progress-bar progress-bar-striped active color-primary" style="width: 12%;"></div>
    <div class="progress-bar progress-bar-striped active color-secondary" style="width: 12%;"></div>
    <div class="progress-bar progress-bar-striped active color-focus" style="width: 12%;"></div>
    <div class="progress-bar progress-bar-striped active color-common" style="width: 12%;"></div>
    <div class="progress-bar progress-bar-striped active color-success" style="width: 12%;"></div>
    <div class="progress-bar progress-bar-striped active color-warning" style="width: 12%;"></div>
    <div class="progress-bar progress-bar-striped active color-error" style="width: 12%;"></div>
</div>