Change background color saturation based on percentage loaded

Question

I want to make a preloader of sorts where by as the page loads instead of resizing a divs width based on the % loaded I would like to change the saturation of the background-color of a div based on the % loaded.

To be honest I don't mind if I have to set #fff and then fade that color to red I just don't know how to like the saturation change or the % of color faded with the % loaded.

This is what I have been trying:

JS

$("#preloader").each(function() {
    $(this)
        .data("origColor", $(this).backgroundColor())
        .backgroundColor('#f4421a')
        .animate({
            backgroundColor: $(this).data("origColor")
        }, 1200);
});

CSS

@-webkit-animation changeColor {
   0% { background-color: $white; }
   100% { background-color: $orange; }
}
.js div#preloader { 
    @include position(fixed, $z:9999);
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    background: $loading no-repeat center center, $header-bg-mobile repeat top left, lighten($black,70%);
    -webkit-animation: changeColor 2s linear infinite;
}

Answer 1

Example

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:

EXAMPLE1: background color

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.