How to make a progress bar

Question

How would one go about making a progress bar in html/css/javascript. I don\'t really want to use Flash. Something along the lines of what can be found here: http://dustincur

Answer 1

You can create a progress-bar of any html element that you can set a gradient to. (Pretty cool!) In the sample below, the background of an HTML element is updated with a linear gradient with JavaScript:

myElement.style.background = "linear-gradient(to right, #57c2c1 " + percentage + "%, #4a4a52 " + percentage + "%)";

PS I have set both locations percentage the same to create a hard line. Play with the design, you can even add a border to get that classic progress-bar look :)

https://jsfiddle.net/uoL8j147/1/