Foundation progress bar


May 04, 2021 11:00 Foundation5


Table of contents


Foundation progress bar

The Foundation progress bar can be displayed as the extent to which the program is handled:

Foundation progress bar

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

< div class= "progress" >
< 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

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

Try it out . . .

Fillet progress bar

.radius and .round are used to add fillet effects to the progress bar:

Instance

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

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

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

Try it out . . .