Tech

How to Create a Progressing Bar using Html, CSS and Javascript

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 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