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
<Span class = "meter" style = "width: 70%"> </ span>
</ Div>
The progress bar color
By default, the progress bar color is blue. Different colors of class: .secondary
, .success
, or .alert
:
Examples
<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>
Fillet progress bar
.radius
and .round
classes used to add rounded corners for the progress bar:
Examples
<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>
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
<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>
Progress bar label
CSS can be used to tag the progress bar. The following example we added a <span> element to display percentages:
Examples
.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>