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 to the end. If you found value in this, kindly recommend (by clicking the share buttons below) so other people can learn too!
Is there a Howto you'd love to learn? We'll be glad to create it for you, let us know in the comments. Cheers!

CONTACT US

We're always here. You can send us an email and we'll get back to you, asap.

Sending

© 2015 - 2018 Howtos.ng

or

Log in with your credentials

Forgot your details?