Foundation 進度條

Foundation 進度條可以作為程式處理的程度來顯示：

我們可以在 <code>&lt;div&gt;</code> 元素中使用 <code>.progress</code> 類來建立進度條，

<code>.meter</code> 類用于子元素(&lt;span&gt;)。我們可以在 &lt;span&gt; 元素中設定進度百分比，如下所示：

&lt;div class="progress"&gt;

  &lt;span class="meter"

style="width:70%"&gt;&lt;/span&gt;

&lt;/div&gt;

預設情況下，進度條顔色為藍色。不同顔色的類為：<code>.secondary</code>, <code>.success</code>, 或 <code>.alert</code>:

style="width:50%"&gt;&lt;/span&gt;

&lt;div class="progress

secondary"&gt;

success"&gt;

alert"&gt;

<code>.radius</code> 和 <code>.round</code> 類用于為進度條添加圓角效果：

&lt;div class="progress radius"&gt;

  &lt;span

class="meter" style="width:50%"&gt;&lt;/span&gt;

&lt;div

class="progress round"&gt;

可以使用 <code>.small-num</code> 或 <code>.large-num</code> 來修改進度條的寬度，

num 是一個數字在 1(8.33%) 和 12(default (100%)) 之間:

&lt;div class="progress large-1"&gt;

large-6"&gt;

large-9"&gt;

large-11"&gt;

&lt;!--

Default width --&gt;

large-12"&gt;

可以使用 CSS 為進度條添加标簽。以下執行個體中我們添加了&lt;span&gt;

元素來顯示百分比：

 &lt;style&gt;

.percentage {

  position: absolute;

  top: 50%;

  left:

50%;

  color:

white;

  transform: translate(-50%, -50%);

  font-size: 12px;

}

&lt;/style&gt;

style="position:relative;width:75%"&gt;

    &lt;span

class="percentage"&gt;75%&lt;/span&gt;

  &lt;/span&gt;

class="progress success"&gt;

style="position:relative;width:50%"&gt;

class="percentage"&gt;50%&lt;/span&gt;

class="progress alert"&gt;

style="position:relative;width:25%"&gt;

class="percentage"&gt;25%&lt;/span&gt;