"People count up the faults of those who keep them waiting"
Seems like I kept them busy decoding this loading bar :D
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
- 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.
- jQuery: We are creating this loading bar using jQuery so download jQuery latest version here.
jQuery Code within <head>..</head> tags
<script type=text/javascript src=jquery.js></script> <script type=text/javascript> $(window).load(function(){ $("#loading").hide(); }) </script>
HTML Code within <body>..</body>tags
<div id="loading"> Loading content, please wait.. <img src=loading.gif alt="loading.." /> </div>
Make sure you add this code just below the starting <body> tag so it should be downloaded first.
CSS Code for loading DIV
#loading { position:absolute; width:300px; top:50px; left:50%; margin-left:-150px; text-align:center; padding: 10px; font:bold 11px Arial, Helvetica, sans-serif; background: #222222; color: #ffffff; }
Use your imagination and create something nice & unique.
Your comment, suggestion and feedback is highly appreciated. There's more to come to stay tuned...
Comments on An easy way to create Loading Bar!