8

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.

Ben G
  • 26,091
  • 34
  • 103
  • 170

3 Answers3

11

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.

Bertrand Marron
  • 21,501
  • 8
  • 58
  • 94
  • will this prevent users from doing other things while it's showing? – Ben G Jun 05 '11 at 01:37
  • 1
    It will. It displays a `div` that covers the whole page. Make sure there's nothing that you want to cover that has a higher `z-index`. Also, this will just prevent users from clicking on covered items, it can't be used as a security measure. – Bertrand Marron Jun 05 '11 at 01:46
3

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.

Community
  • 1
  • 1
eksith
  • 156
  • 4
1

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

Christopher Armstrong
  • 7,907
  • 2
  • 26
  • 28