Latest web development tutorials
 

W3.CSS Progress Bars


Progress Bars

A progress bar can be used to show how far along a user is in a process:

20%


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>

Try it Yourself »


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>

Try it Yourself »


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>

Try it Yourself »


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>

Try it Yourself »


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.

25%

50%

75%

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>

Try it Yourself »


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>

Try it Yourself »


Dynamic Progress Bar with Labels

Centered label:

Example

20%

Try it Yourself »

Left-aligned label:

Example

20%

Try it Yourself »

Label outside of the progress bar:

Example

20%

Try it Yourself »