A progressing bar can be used to show a user how far along he/she is in a process. Bootstrap provides several types of progressing bars. A default progressing bar in Bootstrap looks like this: 70% Complete.

 

Step 1 Add HTML:

<div id=”myProgress”>

<div id=”myBar”></div>

</div>

 

Step 2) Add CSS:

To make an animation possible, the animated element must be animated relative to its “parent container”.

Example

#myProgress {

position: relative;

width: 100%;

height: 30px;

background-color: grey;

}

#myBar {

position: absolute;

width: 1%;

height: 100%;

background-color: green;

}

 

Step 3 Add JavaScript:

Create the Animation Using JavaScript:

Example

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 + ‘%’;

}

}

}

 

 


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?