Possible to change loading indicator color based on bg color?

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, Wes开发者_运维技巧ley

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+!