HomeIntroduction
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.
Demo
Program Efficiency
Select Options
Website Projects Progress
Select Options
Weight Lost Progress
Select Options
Upload Progress Bar
Select Options
Select Options
Website Projects Progress
Select Options
Weight Lost Progress
Select Options
Upload Progress Bar
Select Options
Documentation
display(elementId, percentage, colorCode)
Display the Percentage Bar
int colorCode: 1 = Green
int colorCode: 2 = Yellow
int colorCode: 3 = Orange
int colorCode: 4 = Red
emptyProgress(elementId)
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
License
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.