How to create a loading box functionality

Maybe you have seen those boxes that pops up when something is loading on a website. Then when that something has finished loading it goes away again. This is most often used when things are loaded using the AJAX functionality since the page is not reloaded but you want to make it obvious to the user that something is happening. You can easily achieve this functionality on your own if you'd like, it's no magic or difficult stuff at all.

This is the way I have done it.

You create a div element with some code in it that makes up the box that you want to display.
Below is the code I use. Note that the div is hidden by default, i.e. on page load.

<div class="loading" id="div_loading" style="visibility:hidden;text-align:center"> <br /> <img src='images/ajax-loader.gif' style='border:none' alt="loading" /> <br /><br /> <span style="font-weight:bold;color:#000000;">Loading...</span> </div>

It renders like this (when you make it visible):


The location of this div is at the same spot of where you can see it, i.e. we are using position:relative with no movement in x- or y direction. I would say it depends on your solution how you want to do it. You could also use position:absolute if you would like to define the exact same place where the div should appear at all times. In this case it doesn't matter where the actual location is. When it becomes visible it will start at top left of the window and go down x pixels to the right and y pixels down. This is specified in the CSS below for the div together with some other things:

/* Loading */ div.loading { position:relative; left:0px; top:0px; width:170px; min-width:170px; height:105px; min-height:105px; z-index:50001; background-color:#FFFFFF; border: 2px solid #000000; }

I have also created two small and simple javascript functions to display and hide the div. I call the 'enableLoading' function just before an AJAX call that gets something from a database asynchronously. When that something has been fetched successfully and displayed I call the other function 'disableLoading' to hide the div again:

// Make div visible function enableLoading() { document.getElementById('div_loading').style.visibility = 'visible'; } // Hide div function disableLoading() { document.getElementById('div_loading').style.visibility = 'hidden'; }

Check out this site for some cool AJAX gifs if you want to try out the same thing but use another loading image.