A+
A-
Barra cargando - loading con CSS

Me pareció una manera de ver la carga total del blog de una manera muy sencilla y elegante, además de ser bastante discreta pero vistosa al mismo tiempo, la podéis ver funcionando en este mismo blog, su configuración es super sencilla, con tan sólo tres códigos uno para darla estilo, otro sería el script y el último el div que hará la llamada.

Comencemos:

Entra en plantilla y expande artilugios, ahora encima de ]]></b:skin>, pega estos estilos (CSS):

#load_barra {
position: fixed;
display: block;
z-index:999999;
top: 0px;
left: 0px;
background: #FF0000;    /* Color de fondo */
border-top:1px solid #0000FF;   /* Color superior */
border-bottom:1px solid #0000FF;    /* Color inferior */
border-right:1px solid #0000FF;    /* Color derecha */
width: 5%;
height: 4px;   /* Ancho del fondo */
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

Ahora encima de: </head>, pega este script.

<script type='text/javascript'>
//<![CDATA[
(function(jQuery) {
jQuery("#header").ready(function() {
jQuery("#load_barra").stop().animate({
width: "25%"
}, 1500)
});
jQuery("window").load(function() {
jQuery("#load_barra").stop().animate({
width: "75%"
}, 1500)
});
jQuery(window).load(function() {
jQuery("#load_barra").stop().animate({
width: "100%"
}, 1500, function() {
jQuery("#load_barra").fadeOut("fast", function() {
jQuery(this).remove()
})
})
})
})(jQuery);
//]]>
</script>

Y por último debajo de: <body>, pega este div que hará la llamada.

<div id='load_barra'></div>

Si quieres modificarla a tu gusto como por ejemplo darla más anchura y/o cambiarla los colores puedes hacerlo modificando los códigos marcados en azul (tabla de colores).

Una vez implantados los códigos haz vista previa y si todo funciona según lo esperado, puedes guardar plantilla.

Importante: antes de hacer cualquier modificación en tu plantilla haz una copia de la misma, por si surge cualquier problema que podamos restaurarla.

Algunas características:
* No afecta la velocidad de carga de tu blog.
* Compatible con distintos navegadores (Chrome, Firefox, Safari, IE, Opera, etc, etc).
* Da un estilo muy personal a tu blog.
* Múltiples configuraciones.


Fuente, modificación y personalización: Pedro PC

4 comentarios Google+ 4 Facebook

  1. La instale en mi página y la da un toque muy personal. Muchas gracias

    ResponderEliminar
  2. En respuesta a: Chus.Muchas gracias, Chus. Encantados de haberte sido útiles. Un saludo.

    ResponderEliminar
  3. Me ha encantado, funciona perfectamente.
    Gracias por compartirla.

    ResponderEliminar

Nos puedes dejar un comentario, una opinión, o tu experiencia sobre este artículo. Queremos que participes, porque aquí tú eres el protagonista.


 
2013 - 2018 Te interesa saber



Política de privacidad




TiS, con tecnología Responsive Web Design y Blogger

Ir a inicio