Pure CSS3 JavaScript Pre loader without JQuery

Simple JavaScript pre-loader which works without the JQuery library created with CSS3 and JS.


<div id="spinner"> </div>

#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999999;
background: rgba(255,255,255,0.95);

}


<script type='text/javascript'>
  
  function attach(element,listener,ev,tf){

if(element.attachEvent) {

    element.attachEvent("on"+listener,ev);

}else{

    element.addEventListener(listener,ev,tf);

}

}

function fadeOut(element,startLevel,endLevel,duration,callback){

var fOInt;

    op = startLevel;

fOInt = setInterval(function() {

    if(op<=endLevel){

    element.style.opacity = endLevel;
    element.style.filter = "alpha(opacity = " + endLevel + ")";

    clearInterval(fOInt);

        if(typeof callback == 'function') callback(true);

    }else{

    op -= 0.1;

    element.style.opacity = op;
    element.style.filter = "alpha(opacity = " + op*100 + ")";

    }

    },duration);

}

attach(window,'load',function(){
    fadeOut(document.getElementById('spinner'),1,0,50,function(cb){
        
        document.getElementById("spinner").style.display = "none";

    //alert('The loader has faded out!')

    });
    
},false);
  
</script>