An easy way to create Loading Bar!

“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…

129 thoughts on “An easy way to create Loading Bar!”

  1. Fretsnkeys says:

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

  2. sammie says:

    excellent tutorial.

  3. Abhinav Sood says:

    Thanks for sharing – Nifty tip!

  4. Raymond Ho says:

    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!

    1. CSSJockey says:

      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

  5. Ashok says:

    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…

    1. CSSJockey says:

      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.

  6. Cody says:

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

  7. Mike says:

    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…

    1. CSSJockey says:

      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 );
      }
      });

  8. A2f says:

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

  9. Muhammad says:

    Great work.. !!
    Thanks for sharing.

  10. DeKo says:

    Great tip, thank you.

  11. Arjhun says:

    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

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

  13. destry says:

    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

    1. CSSJockey says:

      @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();
      });

  14. Harry says:

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

  15. 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 !

    1. CSSJockey says:

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

  16. Wesker says:

    Excellent!!!

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

  17. Michael Horton says:

    Really Nice thanks.

  18. Vivek Kumar Sharma says:

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

    thanks

  19. Joc says:

    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!

  20. bainur says:

    great post.. nice and awesome. thank you…

  21. snowflake says:

    Thank you so much…useful tip

  22. A.S says:

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

    1. CSSJockey says:

      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.

  23. Saamiul Bashar says:

    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?

    1. CSSJockey says:

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

  24. chestaz says:

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

    1. CSSJockey says:

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

  25. vicky says:

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

  26. Martynas says:

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

    1. CSSJockey says:

      You would need to tweek the script as per your requirements.. I hope you get an idea of how its done 😉

    2. CSSJockey says:

      You would need to tweak the script as per your requirements.. I hope you get an idea of how its done 😉

  27. Shell says:

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

  28. Arif Samoon says:

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

    Thanks a lot.

  29. EmiNarcissus says:

    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~

  30. Rahul says:

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

    1. CSSJockey says:

      Your welcome, I am glad it helped!!

  31. Ranjit says:

    Its really interesting… Cool.. Thanks Jockey…

  32. ochusu says:

    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.

  33. t.v.vignesh says:

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

  34. Gary says:

    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

    1. CSSJockey says:

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

      1. Gary says:

        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

  35. Rob says:

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

    Well Done!

  36. jamsheed says:

    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……

  37. Orif Mahmanov says:

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

  38. Abal2 says:

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

    thanks
    Abal2

    1. CSSJockey says:

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

      1. Abal2 says:

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

  39. pp says:

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

  40. Jocuri Mario says:

    Cool blog! I really enjoy it.

    1. CSSJockey says:

      Thanks, I am glad you like what I do :)

  41. 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 :(

    1. Mohit Aneja says:

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

  42. gino says:

    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.

    1. Mohit Aneja says:

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

  43. James says:

    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.

    1. James says:

      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.

      😛

  44. Dominicanstan says:

    Thanks!!!

  45. Allison Reeta says:

    Great tutorial! Added to favorites and bookmarked this site!

  46. Lithxe says:

    Thank you so much for this, it is exactly what I was looking for! :)

  47. rajendra says:

    Superb. Fantastic
    I like so much.
    Thanks

  48. Mike says:

    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?

    1. Mohit Aneja says:

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

  49. Benjamin says:

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

    1. Mohit Aneja says:

      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.

  50. Satu says:

    This looks great, thank you!!

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

    Thanks!

    1. Mohit Aneja says:

      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.

  51. Satu says:

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

  52. Satu says:

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

    1. Mohit Aneja says:

      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.

  53. syed mohammed ahmed says:

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

    1. Mohit Aneja says:

      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.

  54. raj says:

    i saw ur demo but its not working…??

    1. Mohit Aneja says:

      Hi Raj, I just checked the URL its working for me.
      http://cssjockey.com/files/downloads/code/loading/index.php
      Can you tell me the exact issue you are facing?

  55. alcachofa says:

    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?

  56. Ritesh says:

    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.

    1. Mohit Aneja says:

      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.

    2. Judy says:

      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.

  57. ara says:

    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

    1. Mohit Aneja says:

      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.

  58. Josu says:

    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

  59. Shahbaz Ahmed Bhatti says:

    nice work buddy

    thank a lotssssssssssss

  60. Rezve Hasan says:

    Thanks for usefull and short and practical tutorial.

  61. Menj says:

    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

    1. Mohit Aneja says:

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

      1. sensa says:

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

        1. Mohit Aneja says:

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

      2. Dennis says:

        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.

        1. Mohit Aneja says:

          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.

  62. sneha says:

    Hi ,
    Thanks a lot .its work for me.

  63. Manish Kumar says:

    awsum man ! i got exactly same thing what i searching for :)

  64. James says:

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

    thanks again!

    1. Mohit Aneja says:

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

    2. Arun says:

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

      Thank You

  65. Simi says:

    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

    1. Mohit Aneja says:

      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.

      1. nja2nja2 says:

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

        1. Mohit says:

          You can use setTimeOut js function for this purpose.

  66. Jonathan says:

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

  67. nk says:

    Thanks so much!

  68. shubha says:

    Thanks for providing a valuable tutorial.

  69. BENJAMIN says:

    Great tutorial!

  70. ritik says:

    Nice site

  71. MAlik jeee says:

    Thanks a lot! working for me :)

  72. CHoltzman says:

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

    thanks

    1. Mohit Aneja says:

      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.

  73. Ryan says:

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

    1. Mohit Aneja says:

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

    2. Ahlam says:

      just have the image in bigger dimensions

  74. redet says:

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

    thank you !

    1. Mohit Aneja says:

      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.

  75. Gurmeet Singh says:

    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

    1. Mohit Aneja says:

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

  76. shweta says:

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

    1. Mohit Aneja says:

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

  77. Cay Arcena says:

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

    1. Mohit Aneja says:

      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.

  78. Aamir says:

    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.

  79. miaekim says:

    Thanks for sharing.!!!!

  80. Naijapikin says:

    Thanks Man that was great!

Leave a Comment

Your email address will not be published.*

*