Latest web development tutorials

Foundation 進度條

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

我們可以在<div>元素中使用.progress類來創建進度條， .meter類用於子元素(<span>)。 我們可以在<span> 元素中設置進度百分比，如下所示：

實例

< 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 為進度條添加標籤。 以下實例中我們添加了<span> 元素來顯示百分比：

實例

< 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 >

嘗試一下»