“People count up the faults of those who keep them waiting”
Seems like I kept them busy decoding this loading bar πŸ˜€

Recently, while browsing I landed on a page on StackOverflow.com where people were discussing about how I implemented this loading bar on CSSJockey.com. I could sense a lot of confusion in the discussion so thought I would take the mystery out as I love to share best practices. Here’s how you can create a loading bar in few steps..

Things You’ll Need

  1. A nice loading image: If you are good in creating animated GIF images that’s nice, otherwise you can create a loading image with this cool Ajax Loading Gif Generator.
  2. jQuery: We are creating this loading bar using jQuery so download jQuery latest version here.

jQuery Code within <head>..</head> tags

HTML Code within <body>..</body>tags

Make sure you add this code just below the starting <body> tag so it should be downloaded first.

CSS Code for loading DIV

Live Demo

Use your imagination and create something nice & unique.

Your comment, suggestion and feedback is highly appreciated. There’s more to come to stay tuned…

 
  • Thanks for sharing, I will try this on my website…

  • sammie

    excellent tutorial.

  • Thanks for sharing – Nifty tip!

  • Raymond Ho

    Mohit Aneja,

    That was very helpful Mohit!! I never thought that you’ll find my question in Stackoverflow!

    I’ll definitely never forget your helpful spirit!

    How did you know about the question in Stackoverflow? You are not even registered user yet!

    • CSSJockey

      I saw a link back in WordPress Dashboard and checked your entry on Stackoverflow.com. I love to share best practices so thought answering this question will be a good start.

      You can join our Google Group and be a part of CJ community http://groups.google.com/group/cssjockey

  • Ashok

    hi i have tried progress bar in my site.it works fine. but it not displays all the time. Moreover while displaying this image, it looks displaying in separate page. i want to display it in my current page when the page takes more time to load……

    Any ideas…

    • Please share the link of your website where you’re trying to display the loading/progress bar, so that I can take a look and help you out with any issues.

  • Good post dude.

  • Thanks for the post. Relatively easy….it took me some time to get the jQuery to work.

  • This is wonderful! Thank you so much!

    Quick question:

    How would I call that top function if a form was submitted? I have a file upload section I am working on and could use a cool loading bar like this when the upload form is submitted…

    • CSSJockey

      You can use this function on $(“#formid”).submit() and use $.ajax(options) to accomplish this.
      Here’s an example:

      $.ajax({
      type: “POST”,
      url: “some.php”,
      data: “name=John&location=Boston”,
      success: function(msg){
      alert( “Data Saved: ” + msg );
      }
      });

  • A2f

    Thanks for the tutorial, i will use that in my page. I wish it would also show the percantage…

  • Great work.. !!
    Thanks for sharing.

  • Great tip, thank you.

  • well i would like to know how to make my loading bar appear first and then once the page is done loading it should redirect the person .. any ideas ?? please email me at arjhun.s@gmail.com .. thanx people

  • Huh, i can’t see the preview image. Btw, nice work.

  • destry

    I see how this works for a page loading, but do you know how to do something like this if you are waiting for the content to be generated in php?

    Thanks

    • @destry: If you are using ajax you can call the loading bar within your code. In jQuery you can use the following code:

      $(“#loading”).ajaxStart(function(){
      $(this).show();
      });

  • Hi, Mohit.
    Another great tips after Santa’s says on dec.
    I will try in myblog. Thanks

  • Hello to all,

    What I want to do, is create a loading thing [ i already have mine ready for use ] but to show it for say 5 seconds then it re-direct to another webpage .. is there a way to do this.. well.. I’m sure there is tbh, Please help, thanks !

    • You can use Javascript setTimeout() function to achieve this.

  • Wesker

    Excellent!!!

    Thank you. I’ve already tested on my site and works perfect!!!!

  • Michael Horton

    Really Nice thanks.

  • Vivek Kumar Sharma

    very nice tutorial. i wish a body which want get sure from it.

    thanks

  • Joc

    Well nice tutorial but this only waits until the DOM is loaded i think, and it doesnt really check if all the images and stuff have loaded.

    Oh, someone asked about a percentage loading bar: Well, you cant do a percentage loading bar for all loading things, especially for a webpage!

  • great post.. nice and awesome. thank you…

  • Thank you so much…useful tip

  • A.S

    hi
    I insert the codes. How can i preview it in my local pc, before upload it to server?
    tnx

    • You need to install a local server on your computer to replicate similar environment on your local computer.
      For PC you can download Wamp and if you are using Mac or Linux you can download XAMPP or MAMP.

  • Saamiul Bashar

    I see that you have updated your loading bar with a lightbox effect. I have tried combining them, but it didn’t work. Would you be able to update your tutorial for this?

    • Replied to your previous comment, try that code. I’ll try to write a tutorial for the same..

  • thnk for sharing….if u dont mind can u sharing loading code for ur page..

    • Sure, I’ll try to write a tutorial on this next week. Thanks!!

  • vicky

    thanks… its very simple……..great work…..:D

  • Martynas

    This script is not working when content is being generated by PHP.
    My PHP content is generated by HTML DOM parser.

    • You would need to tweek the script as per your requirements.. I hope you get an idea of how its done πŸ˜‰

    • You would need to tweak the script as per your requirements.. I hope you get an idea of how its done πŸ˜‰

  • Shell

    CAn yu make a loading bar to go in my signature on my phone someone got it but they want tell me how

  • Worked like a charm. Especially, the comments along with the code made things quick and easy.

    Thanks a lot.

  • This passage helps a lot. I am creating my own greasemonkey tweats. So creating a loading layer just about to be the problem. Thx a lot~

  • Rahul

    thnx a lot for this step by step procedure to incorporate a loading bar .

    • Your welcome, I am glad it helped!!

  • Its really interesting… Cool.. Thanks Jockey…

  • ochusu

    I have the same question as “Arjhun” I would like to know how to make my loading bar appear first and then once the page is done loading Have my contexts appear and were do i put the the “CSS Code for loading DIV” I’m new to this kind of things so I would be overly happy for any help you could provide.

  • Awesome!! Gr8 job.. Its perfectly working… Coool too..

  • Gary

    Great tutorial! Can you think of why it would not work in IE7? FF and EI8 it works like a charm, in EI7 I get the bar with no animation…

    I have jquery-1.2.6.min.js on the page and loaded on the server.

    Thank you for sharing.

    Gary

    • I guess with animation you mean the bar, its an image so check the paths..

      • Thank you for your reply, no I meant that the image does not animate in IE7, it displays the image, but it does not animate. It works perfect in FF, so it would seem to be a browser specific issue.

        In fact, I just checked your demo, and it does not work in IE7, however it is working in IE8, so I am guessing I must have some setting in my IE7 that is not allowing the animation…

        If you can think of anything, that would be great, if not, thank you for the code and for your reply.

        gary

  • Rob

    Worked first time, 3rd i’ve tried, only one that works!

    Well Done!

  • First of all Thank you very much…!

    This is the One i am searching for the whole day…(Thanks to Google also)

    Well done..Keep posting……

  • Orif Mahmanov

    Thank you very much. It is very useful for me!

  • I have tried it in visual studio but it’s not working.
    do you have any idea?

    thanks
    Abal2

    • If you have written the same code, it should work. use firebug to debug and test.

      • Ok, I’ll try. I’ll ask you again, if I’m still confused. Thank you very much

  • pp

    Hi, I was wondering where do you put the ‘CSS Code for loading DIV’ within the html script? :s

  • Cool blog! I really enjoy it.

    • Thanks, I am glad you like what I do πŸ™‚

  • mohit bro i need ur help πŸ™ i want to delete out going links from footer can u pls help me they r comin from theme server πŸ™

    • Please send me more details to my email address and will discuss the same.

  • I have a gif file and want to add it as my loading screen page,but I am using wordpress and cannot figure out where to insert the code.

    • You can add the code in your theme files, use header.php or footer.php to insert the code for all pages.

  • James

    Thanks so much Mohit.

    So I’m a complete novice when it comes to Java. I was wondering how I can substitute the “$(window)” bit for a div so that when a certain div is finished loading it executes the “$(“#loading”).hide();” part, instead of wait Any ideas? I’ve tried the below but couldnt get it to work:

    $(“#slideshow”).load(function(){
    $(“#home-load”).hide();
    })

    Thanks again.

    • James

      Never mind! Found solution. It was to use an “onload” command on an image in a certain div on my page. That triggers the hide loadingscreen function.

      function loadingscreen()
      {
      $(“#home-load”).hide();
      }

      I then did the following:
      <img src="images/Services-Sub4.png" alt="Printing" onload="loadingscreen()"

      My gallery is 8mb in size, so I didnt want the user waiting for that long while the whole gallery downloads, only a segment of it.

      πŸ˜›

  • Dominicanstan

    Thanks!!!

  • Allison Reeta

    Great tutorial! Added to favorites and bookmarked this site!

  • Thanks so much. πŸ™‚

  • Lithxe

    Thank you so much for this, it is exactly what I was looking for! πŸ™‚

  • rajendra

    Superb. Fantastic
    I like so much.
    Thanks

  • Mike

    I’m trying to implement this on my site, but for some reason the loading div never disappears? Is there a common reason for this?

    • My be your page loads too fast, try including a high resolution image and refresh the with with cleared browser cache.

  • Benjamin

    I used the code and everything works just fine. However, i can’t really see my animation because the page loads so fast πŸ™

    • Try to include a heavy image and refresh the page by clearing the cache. Command+F5 on MAC or CTRL+F5 on Windows should work.

  • Satu

    This looks great, thank you!!

    Would it be possible to incorporate a flash loading bar, instead of an animated gif?

    Thanks!

    • Flash takes some time to load so I guess, we should avoid using flash .swf for loading as this may not give us the desired result.

  • Satu

    Hey – you deleted my comment so I guess the answer is no, you can’t incorporate a flash loading bar into this?

  • Satu

    Nope, you didn’t delete my comment – I was trigger-happy on the ‘submit’ button… Sorry bro

    • You can display any content with this trick till the window loads completely, try the same and let me know if you face any issues. Note: Flash loading bar needs to be downloaded first to be displayed before the window loads all other content.

  • syed mohammed ahmed

    try this one
    Easy loading bar & logo effects with jQuery
    http://workwithphp.info/?p=38

    • Nice trick, thanks for sharing. However, I believe loading these many images to show the loading bar would not be appropriate, you may combine the same into one image and use CSS sprites to have this kinda effect.

  • raj

    i saw ur demo but its not working…??

  • alcachofa

    Unfortunately I can’t use the Vitashine product, because of the soy. I’m really bummed about that. But it looks like there’s a similar product that doesn’t contain soy, that I may try. Has anyone had any experiences with this one?

  • Ritesh

    what could be the possible reason for the loading code not to stop..?? it keeps on showing loading, even after the page has completely loaded.

    • Let me know the browser you are using. Try the demo in your browser and see if that works ok. If yes, please verify the code for ajax stop.

    • Judy

      Ritesh,

      After you downloaded the jquery file, did you rename it to jquery.js? Either that, or you can leave the jquery file name alone and change the script code to point to the jquery file you downloaded. You gotta do one or the other or it won’t work.

  • ara

    dear is it possible to have this loading bar in phpfox v3 because i am using phpfox v3 it is ajax browsing site , i have used the jQuery Code within .. tags but it did not worked if possible show a solution. thanks from your help

    • This code has nothing to do with php code, you just need to implement the required jQuery, HTML and CSS in your code and it will work. If you would like this work within the PHP functions, you would need to update or use the HTML and CSS of the code.

  • Josu

    Great.. thank you.. I’m using the jquery.js but hosted in google api instead of having it in my site. Great Job….
    http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

  • Shahbaz Ahmed Bhatti

    nice work buddy

    thank a lotssssssssssss

  • Rezve Hasan

    Thanks for usefull and short and practical tutorial.

  • Menj

    is it possible to redirect the loadingpage to a new page after the loading is complete? or just load the whole images and html when it reaches 100%? πŸ™‚ TY

    • Yes, you can use JS window.location to redirect users to another page once the loading is done.

      • sensa

        how can i creat a loading bar with percent(%) indicator ???????

        • You can play with the CSS width property and change the same via jQuery .CSS method.

      • Dennis

        I have a project where I would like your process bar showing when an Button is press. the Button redirect to an other page.
        it takes some time before the page load, and I would like your indicator πŸ˜€
        Hope you understand what I mean.

        • Hello Dennis,

          This could work however, when we click on the link which is directly linked to another page, the current page code stops working.
          You can try to implement the code but it may showup for a few seconds.. This could work really well with Ajax.

  • sneha

    Hi ,
    Thanks a lot .its work for me.

  • Manish Kumar

    awsum man ! i got exactly same thing what i searching for πŸ™‚

  • James

    Thank you so much Mohit. I used your technique to make a full screen loading page: http://www.signaturedesign.co.za.

    thanks again!

    • I like the way you implemented the technique. Best of luck!!

    • Arun

      The Pagination in the Portfolio section is very difficult on other hand the loading part is observant.

      Thank You

  • Simi

    Hey! I got some question about that load bar.
    Is that possible to implement such loading bar for script that is currently running??

    Thanks for help in advance! πŸ™‚
    Simi

    • Yes, but you need to know that code and then implement and change the code as per your desire. Be careful, it may mess-up things if you do anything wrong.

      • nja2nja2

        hi, how will i set time to limit loading bar in the page? please help

        • You can use setTimeOut js function for this purpose.

  • Jonathan

    im trying to implement your code on an html page. brick wall each turn. any help is appreciated.

  • nk

    Thanks so much!

  • shubha

    Thanks for providing a valuable tutorial.

  • BENJAMIN

    Great tutorial!

  • ritik

    Nice site

  • MAlik jeee

    Thanks a lot! working for me πŸ™‚

  • CHoltzman

    Is this compatible with IE (internet explorer) 6? or IE period?

    thanks

    • I haven’t checked that in a while as I’ve abandoned IE for my personal work. You can check and if it doesn’t work then you can apply the hacks.

  • Ryan

    Hey, just curious if you have the loading bar in any bigger size? BTW.. Thanks….

    • Hello, You can create the gif image or create a stunning loading bar with jQuery animate function. Explore and have fun creating awesome stuff πŸ˜‰

    • Ahlam

      just have the image in bigger dimensions

  • redet

    nop but i went to use it for specific image or iframe, is it possible?

    thank you !

    • Yes, You can have any content in the DIV tag and it will show up fine. You may consider the size and position of the same as per your desire.

  • Gurmeet Singh

    I have no words,how to say
    You done brillant work.
    That my first comment in site.
    Otherwise , i cannot comment anysite.
    I am beginner,and i learn jquery advanced topic.
    Help and Suggest me
    Thanks

    • Thanks. I am going to write tutorials on web development and cover a lot of topics. You can follow and learn with me.

  • shweta

    is it possible to show this loading bar at the bottom side of the page that contains other elements above it…?

    • Yes, You can change the CSS code to achieve the same.

  • Cay Arcena

    Is it possible for the loading bar to be shown in the middle of a video player or maybe a slideshow?

    • I am not sure what you ant to achieve by video player however, in a slideshow it can be programmed via jQuery and setInterval Javascript function.

  • Aamir

    Hello i am using javascript to load a image. As image are of high resolution it take time to load. so i want to give a loading image for the time when the image gets fully loaded. so can you please help me how can i come through this problem.

  • miaekim

    Thanks for sharing.!!!!

  • Naijapikin

    Thanks Man that was great!