WebAppers

/ best free open source web resources /

Shopify

WebAppers Simple Javascript Progress Bar with CSS

Posted · Category: CC License, Upload

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.

ajax-progress-bar.png

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

121 Comments
  • Ray Cheung

    For now, if you does not have PHP on your local machine, you can change the “index.php” to “index.html”. It will run properly as well. :D

    I will rename the index.php to index.html once I have access to a computer. Sorry for the inconvenience. :P

  • Mike

    I’ve some serious problems in Safari 2, the bar graph doesnt update at all

  • Andrew

    This is so nice – well done!

  • http://blog.shpyo.net shpyo

    Awesome! Really great job!

  • http://foobr.co.uk Aaron Bassett

    I’m sorry am I missing something? But as far as I can see this does not use any AJAX at all, I didn’t see a single XMLHttpRequest being used or any other form of client-server communication.

  • Ray Cheung

    Sorry, you are right. I should use the word “DHTML/Javascript” rather than AJAX. I did not use any XMLHttpRequest at all.

  • Ty

    Looks and functions very nice. It would be interesting to see some suggested uses for such a bar graph

  • http://blog.kesor.net/ Evgeny

    Why have different images for different colors, and not use png transparency and css background-color property?

  • Ray Cheung

    Evgeny, that is a great idea. I will implement it in the next update. :D

  • Pingback: AJAX Progress Bar - Libreria Para Crear Barras de Progreso en AJAX

  • Andrew

    @Aaron – nice attitude.

    Looking at your blog, it must feel good to be right all the time.

  • http://foobr.co.uk Aaron Bassett

    @Andrew – it must feel good to be a giraffe. What you’re not a giraffe? But you have a neck, legs, eyes, ears etc. So I might as well call you a giraffe right?

    Look I didn’t mean to come across as harsh before but this kind of misnaming simply propagates the misconception that ANYTHING involving Javascript must be AJAX.

    And as for your question, I’m not right all the time, just most of it ;)

    I encourage readers on my blog to point out flaws, express different ideas on how to do things and challenge what I have written. This should hopefully lead to a vibrant discussion everyone, readers & author alike can learn from.

    But if you would prefer to only read nice fluffy “oh how pwetty” type comments and never learn anything, well thats your decision…..

  • http://www.bram.us/ Bramus!

    Aaron, couldn’t agree more with you than ever. As a matter of fact, I’ve taken some action on my own and created a nifty Prototype.js Class which hooks itself to the page and achieves the same result, but then in a nicer way (and without AJAX :P).

    See http://www.bram.us/2007/08/02/my-javascript-non-ajax-progress-bar-class-jsprogressbarhandler/ for more details.

  • Ray Cheung

    Bramus, thank you for pointing it out and created the great script for us! That is really awesome.

    People who downloaded WebAppers Progress Bar v0.2, please download Bramus version instead.

    Thank you Bramus!

  • http://www.bram.us/ Bramus!

    Hi Ray, thanks for your comment and mail. Greatly appreciated!

    Of course you can provide a link to this new version. After all, don’t we all want to make a better web? ;)

    Regards,
    Bram.

  • Pingback: Barra de porcentaje basada en ajax

  • Pingback: Barra de porcentaje en ajax - ZonaMasters - Recursos para webmasters

  • Pingback: LautundKlar Webdesign Blog » JavaScript Fortschrittsanzeige / Progressbar

  • Pingback: momworx » Ajax Fortschrittsanzeige / Progressbar

  • Wouter Van den Neste

    Congrats with your work Ray. It realy looks nice ;)

  • Alex

    it doesn’t fill fully with opera last version when i check the demo…
    so sad.

  • Ray Cheung

    @Alex
    Have you tried the latest version made by Bramus?

    http://www.bram.us/demo/projects/jsprogressbarhandler/

  • Pingback: AJAX Progress Bar - Libreria Para Crear Barras de Progreso en AJAX « Neozeratul en la Red

  • Pingback: Progress Bar / Barra de Progreso, hecha con Javascript « Edusanver’s Weblog

  • magnus

    Where does the icons you have used come from. I have seen these icons at several sites.

  • Ray Cheung

    These icons are from Famfamfam, have a look at
    http://www.webappers.com/2007/06/08/famfamfam-most-pupular-silk-icons/

  • Pingback: Barras de progreso con porcentaje realizadas con Javascript | Intenta

  • Pingback: Barras de progreso con porcentaje realizadas con Javascript

  • Pingback: Vinny Carpenter’s blog » Daily del.icio.us for Aug 11, 2007 through Aug 16, 2007

  • http://www.artistshousemusic.org/Video randy

    Is there a way to reset AND restart the progress bar from a single click??? THANKS!!!

  • Ray Cheung

    There is a built-in function to empty the progress bar. Please see documentation

  • http://www.artistshousemusic.org/Video randy

    i know, but i need to reset it on each click

    i know , but i need it to reset the bar, and reload it from each click

    call 2 functions from each on click

  • Pingback: award tour » js + css progress bars

  • Pingback: Simple Entrepreneur

  • Pingback: WebAppers Basit ve Kullanışlı bir Javascript Progress Bar at eravse.com

  • http://aiatola.net Micael

    Bug detected.

    Is necessary change location of PERCENT IMAGE in jsProgressBarHandler.js.

    My modification:

    var progressBarCam = ‘../../lib/jsprogressbarhandler/’;

    progressBar.update(‘ 0%’);

    Thank u

  • breixo

    I’ve change the fillProgress method because it doesn’t fill until some numbers, 97% for example. I’ve only added the else statement, but by this way you can fill until any percent.
    function fillProgress(id, endPercent)
    {
    var nowWidth = $(id).style.backgroundPosition.split(“px”);
    startPercent = Math.ceil(100+(nowWidth[0]/eachPercent))+1;
    var actualWidth = initial + (eachPercent * endPercent);
    if (startPercent)
    {…}
    else{
    setText(id,endPercent);
    }
    }

  • Pingback: Leandro - a toca do Tiger. » ProgressBar com Javascript e CSS.

  • Pingback: Emilio-Jose Rodríguez García » Progress Bar con javascript - Historias de un informático

  • Pingback: Barra de porcentaje basada en ajax « Indigo`s Blog

  • Harry Siereveld

    fot those who implement in php:

    0%

    Event.observe(window, ‘load’, function() {
    manualPB = new JS_BRAMUS.jsProgressBar($(‘element5′), ‘myManualProgressBar’, $x, {animate: true});
    }, false);
    “;

    }
    ?>

  • http://www.bram.us/ Bramus!

    Version 0.2 is out ;)

  • http://www.socon.nl/phpcode.html Harry Siereveld

    Sorry for not-readable above posting.
    to see complte code:
    http://www.socon.nl/phpcode.html

    regards.

  • Pingback: Bram.us » My Maintenance : jsProgressBarHandler 0.2.1

  • Pingback: Webmaster 38 » Blog Archive » Ajax Progress Bar at ajax scripts compound

  • Karthik

    Hi,

    How do I fix the place where this progress bar is displayed and what control should I use (like use an tag and use any of the progress bar images?)

    Your answers would be appreciated

  • Pingback: Ajax Loading and Progress Bars | Webz

  • Pingback: Caminews » WebAppers Simple Ajax Progress Bar with CSS by WebAppers

  • Pingback: Bram.us » My Javascript (non-AJAX) Progress / Percentage Bar : jsProgressBarHandler 0.3

  • Pingback: Cool Javascript Progress/Percentage Bar (Non-Ajax) | Just Talk About Web

  • 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. :D
    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.

  • 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.

  • Nazmul Hasan Nero

    I am not familiar with prototype. Can we implement it with jQuery

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons