W3.CSS Progress Bars
A progress bar can be used to show how far along a user is in a process:
Basic Progress Bar
A normal <div> element can be used for a progress bar.
The CSS width property can be used to set the height and width of a progress bar.
Example
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Progress Bar Width
Change the width of a progress bar with the CSS width property (from 0 to 100%):
Example
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Progress Bar Colors
Use the w3-color classes to change the color of a progress bar:
Example
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Progress Bar Labels
Add text inside a w3-container element to add a label to the progress bar.
Use the w3-center class to center the label. If omitted, it will be left aligned.
Example
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Progress Bar Text Size
Use the w3-size classes to change the text size in the container:
Example
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Progress Bar Padding
Use the w3-padding classes to add padding to the container.
Example
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Rounded Progress Bars
Use the w3-round classes to add rounded corners to a progress bar:
Example
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Dynamic Progress Bar
Use JavaScript to create a dynamic progress bar:
Example
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green"
style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" onclick="move()">Click Me</button>
<script>
function move() {
var elem =
document.getElementById("myBar");
var width =
1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
Dynamic Progress Bar with Labels
Centered label:
Left-aligned label:
Label outside of the progress bar:
Another example (advanced):
