Question

I’m trying to make a loading overlay thing.
Currently, I have some javascript adding and removing the class that makes everything 45% opaque, and adds the mac-like spinner for waiting until (sorting for example) complete.

Now, the current way,

.currently-loading {
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
width: 950px;
background-attachment: fixed;
background-image: url(../images/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}

puts the image on top, but the gif doesn’t animate.
Without the background-attachment: fixed, it animates, but text can be on top of the loading gif.

ideas?

Answer 1

Is it not an option to do this with an img tag?

HTML:

<div id="overlay"><img src="loading.gif" alt="Be patient..." /></div>

CSS:

#overlay img { display: none; }

#overlay.currently-loading img { 
    display: block; 
    width: 100%;
    heigth: 100%;
}

---

Updated css.