Overlay progress bar with jQuery

Question

I want to display a progress bar that "overlays" the page, disabling other actions while it's running, kind of like an alert (except you couldn't exit it by clicking anything). What's a fast way to do this in jQuery?

I already have the image picked out-- an animated progress bar. Just need a way to properly overlay it.

Answer 1

You can easily implement your own overlay.

#overlay {
  background-color: black;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0.2; /* also -moz-opacity, etc. */
  z-index: 10;
}

Then display <div id="overlay"><img src="/path/to/your/image"/></div> when your page is loading, or whenever you want to display it.

Answer 2

I think the jQuery UI Modal is what you're looking for. It overlays the rest of the screen, until a user dismisses the dialog. You can add your progress bar inside the dialog itself or add the jQuery UI progress bar as well, if you find out that works better. That also has a lot of options that you may find handy.

If you want this to be truly a "can't-do-anything-until-this-finishes" type of dialog, then you can also take out the closing "X" using this solution.

Answer 3

Have you taken a look at qTip? This is what we use it for.