WebAppers Home


Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. However, it is very difficult to find a working and easy solution without using Flash. Therefore WebAppers have created a simple Javascript based Percentage Bar / Progress Bar which is inspired by Bare Naked App. Bare Naked App taught us how to display Percentage Bar with 2 images only by using CSS. And then I used a little bit of Javascript to make it more interactive. You can use it anywhere you can think of. Use your Imagination, I am sure you will find it useful somewhere.
Go Back to Original Article


Program Efficiency
Select Options

Website Projects Progress
Select Options

Weight Lost Progress
Select Options

Upload Progress Bar
Select Options


display(elementId, percentage, colorCode)

Display the Percentage Bar

int colorCode: 1 = Green

int colorCode: 2 = Yellow

int colorCode: 3 = Orange

int colorCode: 4 = Red


Empty the Percentage Bar by setting 0%

plus(elementId, percentage)

Increment the Percentage Bar by the specified percentage

minus(elementId, percentage)

Decrement the Percentage Bar by the specified percentage

setProgress(elementId, percentage)

Set the Percentage Bar with the specified percentage

fillProgress(elementId, percentage)

Fill up the Percentage Bar with the specified percentage


This library is licensed under Creative Commons license, so you can use it for anything you like, as long as you include the copyright notice.