HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A progress bar can be used to show how far along a user is in a process
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.
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Change the width of a progress bar with the CSS width property (from 0 to 100%):
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Use the w3-color classes to change the color of a progress bar:
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
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.
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Use the w3-size classes to change the text size in the container:
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Use the w3-padding classes to add padding to the container.
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Use the w3-round classes to add rounded corners to a progress bar:
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Use JavaScript to create a dynamic progress bar:
Click Me
function move2() { var elem = document.getElementById("myBar2"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width == 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } }
<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>
Centered label:
Left-aligned label:
Label outside of the progress bar:
Another example (advanced):