W3.CSS Progress Bars

Toggle navigation
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 <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.

25%

50%

75%
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:

50%

50%

50%
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.

25%

25%

25%
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:

25%

25%

25%
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:


Click Me
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" 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:

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 ❯