1. Home
  2. Foundation progress bar

The best Foundation progress bar Tutorial In 2024, In this tutorial you can learn The progress bar color,Fillet progress bar,A progress bar Size,Progress bar label,

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>

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>

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>

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>

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>

Hot Tools

Other Tools

Online Tutorial

Website Navigation

Foundation progress bar
10/30