31 Jul

WebAppers Simple Javascript Progress Bar with CSS

CC License, Upload

Leave a Comment

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 has 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 interactivity. You can use it anywhere you can think of. Use your Imagination, I am sure you will find it useful somewhere.

Click the image above to see the demo and documentation of Progress / Percentage Bar. And please feel free to grab the package below and test it on your machine.

Download Ajax Progress Bar

Bram.us has created a better version written in objects and unobtrusive, You can view the documentation and demo through Dynamic Unobtrusive Javascript Progress/Percentage Bar.

Download Ajax Progress Bar Version 0.33 by Bram.us

If you have any suggestions, please feel free to leave comments. I will update the script regularly.

Requirements: Prototype Framework
Demo: http://www.webappers.com/progressBar/
License: Creative Commons License

Sponsors

Comments

http://www.kosmetic.pl Kosmetyki

Thanks for this post – I have aplied your solution for showing stock statuses in my shop.
http://www.levelpc.es/ informatica online

fantastic idea kosmetiky, I also will add it modifying it a little
regards
http://ideagrafika.pl IdeaGrafika

Great stuff, cant wait to test it on my site.
http://recznekatalogowanie.eu katalogowanie

It’ s great idea!
http://www.sweetmarketing.pl Pozycjonowanie

It works great. Thanks.
http://www.meskon.pl/ Meskon

decent info easily explaind. thanks for that!
http://termdom.pl Elektryk

Thanks for this progressbar. Works fine for me!
Zombie_Girl

I was looking for something like this all over the place, this is just great! I was just wondering if you guys could also have this converted into a plugin for wordpress, i bet it would be a hit! :] Thank You for this wonderful script!
http://gry-przegladarkowe.pl Gracz

Cool progressbar
http://www.itdesigner.ir طراحی وب سایت

Great and useful for me.
Gareth

The link to download it is broken.

The first link entitled “Download Ajax Progress Bar” has no link at all.

The link entitled “Download Ajax Progress Bar Version 0.1 by Bram.us” is broken.

And the link in the middle is to a page that describes another much older version of the tool that is not very usable as there is no way to reset the progress bar back to zero.

I want to download the awesome version of the tool that is shown in the demo on this website. How can i do this? I tried taking the js files down from the site but I also need a bunch of images that they reference…..
Ray Cheung

@ Gareth,

The download link is now updated!
Matt

This is a great script!

Is it possible to have some downloads in a cron and display the status of this download with this script ?

I’m figuring out a way to do this…
Gareth

Thanks for the quick response Ray, however what you have linked to is the adaption of the original tool made by Bram.us, not the original tool.

I have no idea why Bram.us made those changes to the tool, by removing the ability to reset the progress bar back to zero (he removed the method entitled “emptyProgress”), he has effectively made it useless for anyone who wants to be able to use the progres bar on a dynamic page that allows users to requery the page (on the second query/upload the progress bar will be stuck at 100%).

I have no idea why he choose to mess with a perfectly functioning tool, I have tested the demo here in IE, chrome, FF, and Opera and it has no issues. Don’t fix what isn’t broken!

I have worked out how to download the original version shown on the demo here, in case others are interested, this is how to do it:

1,Go here:
http://www.webappers.com/progressBar/lib/

and download all 3 files listed (including the css file)

2,Go here:
http://www.webappers.com/progressBar/images/

and download all 5 of the .png files listed

3, Make sure that you preserve the same file path structure as the demo does, or if you choose a different structure, then adjust the file paths in the code accordingly.
http://www.bram.us/ Bramus!

Gareth,

Calling setPercentage with a value of 0 looks the same as emptyProgress to me, hence I didn’t implement that method.

Be sure to give the (source of the) demo at http://www.bram.us/demo/projects/jsprogressbarhandler/ a proper look.

As you’ll see, that demo works fine (and has worked fine for the past 4 years ever since it’s been released) in any browser you’ve mentioned.

Regards,
Bram.
Gareth

“Calling setPercentage with a value of 0 looks the same as emptyProgress to me, hence I didn’t implement that method.”

Nothing could be further from the truth, in your version, calling setPercentage with a value of 0 counts the progress bar backwards down to zero. So users will see the percentage figure dropping gradually back down to zero. Why would you want users to think that the progress is decreasing?
http://www.bram.us/ Bramus!

You can always set the animation property to false, or make use of the second parameter the setPercentage function accepts: myPB.setPercentage(0, true);
Gareth

Ok, Thanks Bramus. What is the second parameter? It is called “clearQueue” which does not indicate that it is specifically to do with whether or not you want to animate the new percentage. I thought it meant to wipe out any pending animations that have not yet finished running.

I think I will just stick with the original version now that I have it working the way I need it. I played around with your version for hours yesterday and could not work out to dynamically set the animate property to false from the script within my html page.

Why is your version better? What are the improvements that you made? (forgive me for asking what may seem like a stupid question to you, but I cannot see any obvious improvements….)
http://www.bram.us/ Bramus!

@Gareth: Technically my version is constructed in a more advanced way (an object versus a bunch of functions), but that’s not per say better (featurewise). The version that fits you best and that does what you want it to do, that’s the best version
http://www.vert.pl/kubki.html Kubki

I download this progress Bar and it’s great.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact