W3.CSS Progress Bars

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });

W3.CSS Progress Bars

❮ Previous
Next ❯

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

20%

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>

Try it Yourself »

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>

Try it Yourself »

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

Dynamic Progress Bar

Use JavaScript to create a dynamic progress bar:

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 + '%';
}
}
}

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() {
    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%

function move1() {
var elem = document.getElementById("myBar1");
var width = 20;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}

Try it Yourself »

Left-aligned label:

Example

20%

function move3() {
var elem = document.getElementById("myBar3");
var width = 20;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}

Try it Yourself »

Label outside of the progress bar:

Example

20%

function move4() {
var elem = document.getElementById("myBar4");
var width = 20;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demo4").innerHTML = width * 1 + '%';
}
}
}

Try it Yourself »

Another example (advanced):

Example

Added 0 of 10 photos

function move5() {
var elem = document.getElementById("myBar5");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= 100) {
clearInterval(id);
document.getElementById("myP").className = "w3-text-green w3-animate-opacity";
document.getElementById("myP").innerHTML = "Successfully uploaded 10 photos!";
} else {
width++;
elem.style.width = width + '%';
var num = width * 1 / 10;
num = num.toFixed(0)
document.getElementById("demo5").innerHTML = num;
}
}
}

Try it Yourself »

❮ Previous
Next ❯