Progress Bar Using CSS linear-gradient

I experimented with the linear-gradient css feature to make a progress bar. This keeps the html very simple and the JavaScript is also very lightweight.

The progress bar itself is a div with class progress_bar. All these divs are automatically converted to progress bars.

To set the value of the progress bar you call the JavaScript function ProgressBar.set(aElement, aPercent) passing in either the progress bar element or its id, and the value 0-100.

Since the progress bar is a simple div you can easily adjust the style using css via the progress_bar class or the element’s id.

Below are some examples. In order to demonstrate manipulating the progress bar, you can click and drag on the bar.

Copy the HTML, CSS, and JavaScript to your own website. Modify the appearance by setting the variables (–gradient-start, –gradient-end, –background-color, –percent, –height, –font-height) or adding any other css you wish within the .progress_bar class.

NB Requires jQuery.