Simple efecto loader jquery

Bien (Lo que pasa es de que) esta vez traigo un ejemplo sencillo donde muestro la forma de colocar una imagen loader mientras carga nuestra pagina utilizando jquery , el ejemplo es muy sencillo por lo que no sera tan dificil poder realizarlo, yo hice mas o menos esto:


coloco dentro de la etiqueta head

<link rel="stylesheet" href="estilo.css" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>

En estilo tengo lo siguiente:

/*Precarga*/
.loadingAll {
            display: none;
            z-index: 1;
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background-color: white;
            filter: alpha(opacity=75);
            opacity: 0.75;
}

Dentro del body pongo esto:

<label id="texto"></label>

<div id="divProgreso" class="loadingAll" align="center" >
        <img src="loading.gif" style="position: relative; top: 50%;"></img>
        <div style="color: red; position: relative; top: 5%; " align="center">
              Se est&aacute; cargando la pagina... Espere por favor.
        </div>
</div>

Despues en head coloco el javascript:

jQuery(document).ready(function(){
//imagen precarga
     $("#divProgreso").css("display" , "block");
     $("#texto").text("Cargando...");
     });


//Coloque 9 segundos para que se vea el efecto este lo pueden colocar a su consideracion
  $(window).load(function(){
      //Quita imagen precarga
      setTimeout(function(){
           $("#divProgreso").css("display","none");
           $("#texto").text("Finalizado...");
     },9000);
});


y Listo esto debe fucionar maso o menos asi(por si solo quieren hacer el copy paste):

<!DOCTYPE html>
<html>
<head>
  <title>Conexion Banorte - Flujo a central</title>
<link rel="stylesheet" href="estilo.css" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>

<script>
jQuery(document).ready(function(){
    //imagen precarga
     $("#divProgreso").css("display" , "block");
     $("#texto").text("Cargando...");
     });



  $(window).load(function(){
      //Quita imagen precarga
      setTimeout(function(){
           $("#divProgreso").css("display","none");
           $("#texto").text("Finalizado...");
     },9000);
     
});
</script>

</head>

<body>
<label id="texto"></label>

<div id="divProgreso" class="loadingAll" align="center" >
        <img src="loading.gif" style="position: relative; top: 50%;"></img>
        <div style="color: red; position: relative; top: 5%; " align="center">
              Se est&aacute; cargando la pagina... Espere por favor.
        </div>
</div>
</body>
</html>

haaaa. esta es la imagen

Saludos..