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.e-sac.org Bahaa

Hey everybody, i’m using the php ftp_put() function for file upload and the file is submitted to it from an html form in another page, how can i associate the progress bar to the upload, awaiting your reply people…??!!
balle carl

when i set animate=false,, there are some errors ….
Pingback: Bram.us » My Javascript (non-AJAX) Progress / Percentage Bar : jsProgressBarHandler 0.3.1
Lara

Hi,

Can anyone explain how do we change the progress bar image depending on each scenario?

if 100% then show green progress bar (green image)
likewise if less than 100% then show red progress bar (red image)
http://www.bram.us/ Bramus!

Lara, see http://www.bram.us/projects/js_bramus/jsprogressbarhandler/ for more details and howto
http://a joe

Hi i was wondering how i can add more progress to the progress bar using javascript. I create a manual progress bar as in the doc:

Event.observe(window, ‘load’, function() {
manualPB = new JS_BRAMUS.jsProgressBar(
$(’progressbar’),
45,
{
showText : true,
animate : true,
width : 154,
height : 11,
boxImage : ‘images/bramus/custom1_box.gif’,
barImage : ‘images/bramus/custom1_bar.gif’
}
);
}, false);

everything works and it loads it with 0%

But can i add progress to this bar using javascript?

like putting :

manualPB.setPercentage(’70′);

below the progress bar creation? i get a manualPB is undefined.
Pingback: Tipp: Ajax Progressbar | IT.CappuccinoNet.com Blog
Pingback: Exceptional Ajax/javascript Techniques (Recently Created)
Pingback: Skylog » Blog Archive » links for 2008-05-13
Pingback: 30 recently created exceptional ajax javascript techniques
Pingback: StarryNight » Blog Archive » 最新ajax特效30则
Pingback: [PHP5] flush() Problem - Seite 2 - Server Support Forum
Seppe

I’m disappointed, because it does not work when you change it a tiny bit. This is what i have changed:
instead of loading the script in the body like this:

I did it this way:

And in the function “load_javascripts();” I have written:

alert(”Welcome on my website”);
fillProgress (’element1′,’100′);

And this tiny change creates a error that stops all the javascripting on my website…
http://forums.thricescene.com Dwayne Charrington

These are some might fine progress bars. I’ve used them for a long, long time now. A must have for any project that requires them. They just look so damn good!
http://www.ahmetcakir.com ahmet çakır

This possible to can bring Wordpress Plugin empty?
Pingback: creactivecode.com » Blog Archive » Barra de porcentaje basada en ajax
pushpendragold

Thanks I was searching for it. They look too nice.
Ofcourse I have read the license agreement and if I use it for my website I will keep this in my mind ..
Thanks once again…its working fine for me
http://www.iecust.cn Super.Ben

不错,我顶
Pingback: links for 2007-08-14 « artxtra
Pingback: Most Wanted Ajax Techniques: 50+ Ajax Examples and Tutorials | Noupe
Pingback: Most Wanted Ajax Techniques: 50+ Ajax Examples and Tutorials | SulVision
John Pickard

Great idea but bram.us has gone awol!!
Pingback: Bram.us » jsProgressBarHandler 0.3.3
Pingback: Most Wanted Ajax Techniques: 50+ Examples and Tutorials | SulVision
Pingback: Most Wanted Ajax Techniques: 50+ Examples and Tutorials - HackSystems
Pingback: Ajax/javascript Techniques | Design it
Pingback: 50 + Most Useful Ajax Techniques: from Noupe.com « Arunbluebrain’s Flex
http://www.webrevolve.com/ Web Design

Excellent post thanks for sharing, will come in very handy and looks cool too.
Pingback: 30个精挑细致的Ajax和Javascript 技巧 | forcto.com
Pingback: Barra de porcentaje basada en ajax at Blog Borchani Studios
mark

Very nice script.
I miss one feature, though: the ability to use it as ‘progress unknown progressbar’ (progressbar which doesn’t actually show the progress, but just something moving).
I think this would be a very useful feature. Tell me what you think.
Pingback: online college reviews
http://www.techacs.com NYC Web Design

Nice work man….keep it up
thanx
Pingback: progress bar con ajax - javascript - css
http://www.ph-creative.com web design liverpool

Awesome post. We’re using this on our sites now thanks
http://www.webhostinghostess.com marty

Thank you very much this will help moving forward.
http://www.freemoviesbox.com vicky

Great post, I wish you continued greatness and success!
http://www.desiredmovies.com watch movies

I love progress bars, they really make the user stick around and wait because they know something is coming.
http://iphoneawareness.com/firmware/ Iphone firmware

Great post, will definatly bookmark this website and check back for more posts thanks!
Pingback: Web 设计与开发终极资源大全（上） at FEDEV
http://www.spicycollege.com Spicy College

@watch movies: i agreed you man. Great
http://brambrambram.blogspot.com/ Bram

@Bramus: thank u for sharing the new update. got the same name.
http://www.posicionamiento-web.org/ posicionamiento web

it doesn’t fill fully with opera last version when i check the demo…
so sad.
http://inoutwebdesign.com/ London Web Design Agency

great link… i found some perfect results for me here… thanks a lot to share!
http://www.strony-online.pl Mansel

Great and useful for me. Thanks
http://www.ghosti.pl ghosti

Great idea to me. Love your progress bars.
http://www.edelworks.com Rajasekar

Nice.. Code
http://www.facemetin.pl/ JArek

Very good progres bar ! i love it!

Thanks dude

regards!
http://www.superfoto.pl superfoto

Nice work, it really helps me, thx!
http://www.domy-poznan.pl szeregowce poznań

Great idea! I love your progress bars.

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