W3.CSS Progress Bars

❮ Previous Next ❯

What is a Progress Bar?

Progress bars show how far a task or process has progressed.

20%

W3.CSS makes it easy to style progress bars with colors, labels, padding, and rounded corners.

Basic Progress Bar

A normal <div> element can be used for a progress bar.

Use the CSS width property to control the progress.

Example

Try it Yourself »

Progress Bar Width

Change the progress with the CSS width property, from 0% to 100%:

Example

Try it Yourself »

Progress Bar Colors

Use w3-color classes to change the color of a progress bar:

Example

Try it Yourself »

Progress Bar Labels

Add text inside a w3-container element to add a label to the progress bar.

Use w3-center to center the label.

25%

50%

75%

Example

Try it Yourself »

Progress Bar Padding

Use W3.CSS padding classes such as w3-padding-small, w3-padding, and w3-padding-large to change the height.

25%

Example

Try it Yourself »

Progress Bar Text Size

Use W3.CSS size classes such as w3-tiny, w3-large, and w3-xlarge to change the text size:

50%

Example

Try it Yourself »

Rounded Progress Bars

Use w3-round classes to add rounded corners to a progress bar:

25%

Example

Try it Yourself »

Dynamic Progress Bar

Use JavaScript to create a dynamic progress bar:

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 w3-light-grey" onclick="move()">Click Me</button>

<script>
function move() {
  const elem = document.getElementById("myBar");
  let width = 1;
  const id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}
</script>

Try it Yourself »