TUTORIAL HOME
W3.CSS Progress Bars
❮ Previous Next ❯
A progress bar can be used to show how far along a user is in a process:
20%
Click Me
Basic Progress Bar
A normal
The CSS width property can be used to set the height and width of a progress bar.
Example
»
Progress Bar Width
Change the width of a progress bar with the CSS width property (from 0 to 100%):
Example
»
Progress Bar Colors
Use the w3-color classes to change the color of a progress bar:
Example
»
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.
25%
50%
75%
Example
»
Progress Bar Text Size
Use the w3-size classes to change the text size in the container:
50%
50%
50%
Example
»
Progress Bar Padding
Use the w3-padding classes to add padding to the container.
25%
25%
25%
Example
»
Rounded Progress Bars
Use the w3-round classes to add rounded corners to a progress bar:
25%
25%
25%
Example
»
Dynamic Progress Bar
Use JavaScript to create a dynamic progress bar:
Click Me
Example
Click Me
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 + ‘%’;
}
}
}
»
Dynamic Progress Bar with Labels
Centered label:
Example
20%
Click Me
»
Left-aligned label:
Example
20%
Click Me
»
Label outside of the progress bar:
Example
20%
Click Me
»
Another example (advanced):
Example
Added 0 of 10 photos
Upload Photos
»
❮ Previous Next ❯
shahzade bau 