Question

Let’s say I have a loading indicator image, I want it to display nicely on any kind of background color.

is this possible through some sort of combination of jquery and css?

jquery to decide if the background is light or dark, and css to apply some sort of mask to the loading indicator to change it’s color to the calculated value?

Is anything like this out there?

Thanks,
Wesley

Answer 1

Just on the CSS side, you could stack a div on top of your loading image, give it a background-color, and make it see-through.

HTML:

<div id="loading">
    <img src="loading.gif" alt="Loading..." width="X" height="Y" />
    <div id="loadingColor"></div>
</div>

CSS:

#loading { position:relative; width:Xpx; height:Ypx }
#loadingColor {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    opacity:.25; filter:alpha(opacity=25)
}

Then you could just use jQuery to set the actual background-color on #loadingColor:

// This would be in your event listener,
// the "before-AJAX-is-sent" function, etc.
$('#loadingColor').css('background-color', '#whatev');

Best of all, it works in IE6+!