W3.CSS Progress Bars
Progress Bars
A progress bar can be used to show how far along a user is in a process:
Basic Progress Bar
The w3-progress-container class defines a container for the progress bar, and the w3-progressbar defines the actual progress bar (the "filled" area). Set the width of the progress bar with the CSS width property:
Example
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>
Progress Bar Sizes
Set the width/size of the progress bar with a percentage value from 0 to 100%:
Example
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>
Progress Bar Colors
By default, the color of the w3-progress-container is light grey and the w3-progressbar is grey:
Change their color with any of the W3.CSS color classes:
Example
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>
Rounded Progress Bars
Use any of the w3-round classes to add rounded corners to your progress bars:
Example
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>
Progress Bar Labels
Add a new element inside the "w3-progressbar" to add a label to the progress bar.
Tip: Use the w3-center class to always keep the label centered. If omitted, it will be left aligned.
Example
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div>
Dynamic Progress Bar
Use JavaScript to create a dynamic progress bar:
Example
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<button class="w3-btn" 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:
