1

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?

NullVoxPopuli
  • 61,906
  • 73
  • 206
  • 352
  • Would be easier to answer if you included your html, I think. – Hooray Im Helping Jul 08 '10 at 13:36
  • the HTML is just a table that can change width and height. reason why I want to do it with a background image, is because it's easy. the width, heigh, positions are already there... the width and height are also variable. – NullVoxPopuli Jul 08 '10 at 14:18

2 Answers2

12

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.

Tomas Aschan
  • 58,548
  • 56
  • 243
  • 402
  • reason why I want to do it with a background image, is because it's easy. the width, heigh, positions are already there... the width and height are also variable. – NullVoxPopuli Jul 08 '10 at 14:17
  • @DerNalia: You could just set the width and height properties of the image to 100%, and it would still stretch to be the same properties as its container. See my update... – Tomas Aschan Jul 08 '10 at 17:31
1

hmm.. maybe you can try absolute positioning instead, something like this :

HTML
<div class="mydiv">
    <div class="text">Currently Loading....</div>
    <div class="currently-loading">&nbsp;</div>
</div>

CSS
.currently-loading {
    opacity:0.45;
    -moz-opacity:0.45;
    filter:alpha(opacity=45);
    background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
    position:absolute;
    height:48px;
    width:48px;
    z-index:10;
}
.text { display:block; width:200px; height:100px; position:absolute; font-weight:bold; z-index:20;}
Puaka
  • 1,751
  • 13
  • 8