gif loader centered as top layer

Question

I have a php form. After this form is submitted, if all data is valid, then it executes a python script which takes 5-10 seconds. For this wait period I would like to have a progress bar (.gif) displaying in the middle of the screen. If I could also 'fade away' the background so that the progress bar was like a top layer and the background a back layer, that would be great.

Thanks.

Answer 1

Are you using any javascript libraries, such as jQuery? In any of the libraries, I'd imagine there'd be a dozen or so lightbox plugins floating about. Even if you don't want to use a library, you can take a look at their code, and instead of displaying a DIV, just display your gif, if you know what I mean.

There are even some plugins built specifically for this purpose, such as the BlockUI plugin for jQuery.

---

The basic algorithm for doing what you want goes like this:

1. Start Ajax Request
2. Display semi-transparent dark image over the whole page, with an animated gif in the middle.
3. Listen for Ajax response
4. Remove the overlay and loader gif.

I assume you already have steps 1 and 3 going alright. Step 4 is easy-peasy. Step 2 however isn't as easy, but still shouldn't be too hard. I couldn't tell you the code to do it myself, since I've just used lightbox plugins in the past. Take a look on Google for "simple lightbox" or something like that, since all you really want is the most basic functionality. This blog post talks about a CSS-only lightbox which would be a good starting point to help you style the overlay.