# Foundation 進度條 Foundation 進度條可以作為程序處理的程度來顯示：  我們可以在 `&lt;div&gt;` 元素中使用 `.progress` 類來創建進度條， `.meter` 類用于子元素(&lt;span&gt;)。我們可以在 &lt;span&gt; 元素中設置進度百分比，如下所示： ### 實例 ``` <div class="progress"> ? <span class="meter" style="width:70%"></span> </div> ``` ## 進度條顏色 默認情況下，進度條顏色為藍色。不同顏色的類為：`.secondary`, `.success`, 或 `.alert`: ### 實例 ``` <div class="progress"> ? <span class="meter" style="width:50%"></span> </div> <div class="progress secondary"> ? <span class="meter" style="width:50%"></span> </div> <div class="progress success"> ? <span class="meter" style="width:50%"></span> </div> <div class="progress alert"> ? <span class="meter" style="width:50%"></span> </div> ``` ## 圓角進度條 `.radius` 和 `.round` 類用于為進度條添加圓角效果： ### 實例 ``` <div class="progress"> ? <span class="meter" style="width:50%"></span> </div> <div class="progress radius"> ? <span class="meter" style="width:50%"></span> </div> <div class="progress rounded"> ? <span class="meter" style="width:50%"></span> </div> ``` ## 進度條尺寸 可以使用 `.small-_num_` 或 `.large-_num_` 來修改進度條的寬度， _num_ 是一個數字在 1(8.33%) 和 12(default (100%)) 之間: ### 實例 ``` <div class="progress large-1"> ? <span class="meter" style="width:50%"></span> </div> <div class="progress large-6"> ? <span class="meter" style="width:50%"></span> </div> <div class="progress large-9"> ? <span class="meter" style="width:50%"></span> </div> <div class="progress large-11"> ? <span class="meter" style="width:50%"></span> </div> <!-- Default width --> <div class="progress large-12"> ? <span class="meter" style="width:50%"></span> </div> ``` ## 進度條標簽 可以使用 CSS 為進度條添加標簽。以下實例中我們添加了&lt;span&gt; 元素來顯示百分比： ### 實例 ``` ?<style> .percentage { ??position: absolute; ??top: 50%; ??left: 50%; ??color: white; ??transform: translate(-50%, -50%); ??font-size: 12px; } </style> <div class="progress"> ? <span class="meter" style="position:relative;width:75%"> ??? <span class="percentage">75%</span> ? </span> </div> <div class="progress success"> ? <span class="meter" style="position:relative;width:50%"> ??? <span class="percentage">50%</span> ? </span> </div> <div class="progress alert"> ? <span class="meter" style="position:relative;width:25%"> ??? <span class="percentage">25%</span> ? </span> </div> ```