WebAppers Home

Introduction

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

Demo

Program Efficiency
15% 100% Fill 100%

Website Projects Progress
35% 80% Fill 80%

Weight Lost Progress
50% 65% Fill 65%

Upload Progress Bar
80% 80% Fill 50%

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.