Latest web development tutorials

Foundation progress bar

Foundation can be used as a progress bar to show the degree program processing:

We can <div> use element .progress class to create progress bar, .meter class for child element (<span>). We can set the percentage of progress in <span> element, as follows:

Examples

<Div class = "progress">
<Span class = "meter" style = "width: 70%"> </ span>
</ Div>

try it"

The progress bar color

By default, the progress bar color is blue. Different colors of class: .secondary , .success , or .alert :

Examples

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

Fillet progress bar

.radius and .round classes used to add rounded corners for the progress bar:

Examples

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

try it"

A progress bar Size

You can use .small- num or .large- num to modify the width of the progress bar, num is a number between 1 (8.33%) and 12 (default (100%)) :

Examples

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

Progress bar label

CSS can be used to tag the progress bar. The following example we added a <span> element to display percentages:

Examples

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