Tech

How to Add Labels to a Progressive Bar Using Html, CSS and Javascript

If you want to add labels to indicate how far the user is in the process, add a new element inside (or outside) the progress bar:

Step 1 Add HTML:

<div id=”myProgress”>

<div id=”myBar”>

<div id=”label”>10%</div>

</div>

</div>

 

Step 2 Add CSS:

/* If you want the label inside the progress bar */

#label {

text-align: center; /* If you want to center it */

line-height: 30px; /* Set the line-height to the same as the height of the progress bar container, to center it vertically */

color: white;

}

 

Step 3 Add JavaScript:

If you want to dynamically update the text inside the label to the same value of the width of the progress bar, add the following:

Example

function move() {

var elem = document.getElementById(“myBar”);

var width = 10;

var id = setInterval(frame, 10);

function frame() {

if (width >= 100) {

clearInterval(id);

} else {

width++;

elem.style.width = width + ‘%’;

document.getElementById(“label”).innerHTML = width * 1 + ‘%’;

}

}

}

 

 

 

 

 

 

 

 

 

 


P.S. Thanks for reading this far! If you found value in this, we’d really appreciate it if you recommend this post (by clicking the share buttons) so other people can learn!

Found this Howto helpful? Subscribe for more!

You may also learn:

Comments
To Top