Anteriormente ya habíamos visto uno de estos elementos llamativos llamados pre cargadores o pre loader, hoy haremos otro experimento para aplicar este con un estilo diferente, ya que no requiere de ninguna imagen GIF y eta hecho solo con CSS, la función es prácticamente la misma solo que esta vez aplicaremos todo el código junto lo que lo hace más sencillo de emplear.
Al igual que el anterior este código está condicionado para que se ejecute solo en el home de su sitio.
Ventajas: está hecho solo con CSS mas JQuery, es más liviano que el anterior y se puede personalizar mucho más.
Para emplearlo buscamos la etiqueta <body> o en caso de no encontrarla buscamos esta; <body expr:class='"loading" + data:blog.mobileClass'> y justo debajo pegamos el siguiente cogido:
El resultado se cera de la siguiente manera:
Al igual que el anterior este código está condicionado para que se ejecute solo en el home de su sitio.
Ventajas: está hecho solo con CSS mas JQuery, es más liviano que el anterior y se puede personalizar mucho más.
Para emplearlo buscamos la etiqueta <body> o en caso de no encontrarla buscamos esta; <body expr:class='"loading" + data:blog.mobileClass'> y justo debajo pegamos el siguiente cogido:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loader'>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".balls").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>
<style>
#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#32373c;z-index:1000}
.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1) {background-color:#1164c2;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#059a67;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#e10a4c;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#e1880a;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}
</style>
</b:if>
<div id='loader'>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".balls").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>
<style>
#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#32373c;z-index:1000}
.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1) {background-color:#1164c2;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#059a67;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#e10a4c;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#e1880a;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}
</style>
</b:if>
El resultado se cera de la siguiente manera:
No hay comentarios:
Publicar un comentario