keep the background-color as it is, just change the opacity value via jQuery
$("#preloader").each(function() {
$(this).css('opacity','0');
//function to calculate the % loading ...
$(this).animate({opacity: '1'}, 4000);
});
UPDATE... Since you can't use the opacity property, You can use one of the following two methods:
*P.S: Not efficient but they're working
First Method: You can create multiple css classes where is in each you define a background color, each class name has some numerical value we can change through loop while loading and we use the toggle class property like in this code:
The HTML
<div id="preloader" class="pClass0c"></div>
The jQuery
var currClass= 0;
var TotalClasses= 15;
window.setInterval(Preloading, 200);
function Preloading(){
if (currClass < TotalClasses){
$('#preloader').toggleClass('pClass'+currClass+'c');
currClass++;
};
}
The CSS - color classes sample
.pClass3c{ background-color:#dddeff; }
.pClass4c{ background-color:#c8c9ff; }
.pClass5c{ background-color:#aaacff; }
.pClass6c{ background-color:#989aff; }
.pClass7c{ background-color:#7c7fff; }
This method is easier and more flexible since it is easy to alter colors or add more fades, and remember the more the number of color classes is, the smoother the animation and more precise %loading value.
EXAMPLE1: Using .PNG as background image
Second Method You can use CSS image-sprite and animate the background imag's top value depending on the %loading, like:
var BGpos= -15500;
$('#preloader').css( {backgroundPosition: "0 -15500px"} );
window.setInterval(Preloading, 200);
function Preloading(){
if (BGpos < 0){
$('#preloader').css({backgroundPosition: "0 "+BGpos+"px"});
BGpos= BGpos+ 1500;
};
}
But in this method you need a jquery pluging called jquery.bgpos.js
you can check if you view the page source.