Foundation progress bar
May 04, 2021 Foundation5
Table of contents
Foundation progress bar
The Foundation progress bar can be displayed as the extent to which the program is handled:
We
<div>
class to create a progress bar in the
.progress
.meter
class can be used for child elements.
We can set the percentage of progress in the element, as follows:
Instance
< span class= "meter" style= "width:70%" > < /span >
< /div >
Try it out . . .
The color of the progress bar
By default, the progress bar color is blue.
Classes of different colors
.secondary
.success
or
.alert
:
Instance
< 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 >
Try it out . . .
Fillet progress bar
.radius
and
.round
are used to add fillet effects to the progress bar:
Instance
< 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%)) 之间:
实例
< 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 >
Try it out . . .
Progress bar label
You can use CSS to label progress bars. In the following example, we've added the element to show the percentage:
Instance
.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 >
Try it out . . .