Como crear un sencillo cargador de página utilizando JQuery y CSS
Para este sencillo cargador de página usaremos jQuery en su versión 3.3
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
En este ejemplo podremos usar los métodos ready o load para preparar nuestro cargador de página. Veamos como funciona cada uno de ellos:
- $(window).on( ‘load‘, function() { … }) Solo se ejecuta cuando todos los elementos de la página han sido cargados (imágenes, scripts, iframes de publicidad, etc …)
- $(document).ready() { … } Solo se ejecuta cuando el contenido HTML ha sido cargado. A partir de la versión 3.0 de jQuery queda obsoleta y completamente eliminada cuando salga la versión 4.0. Su equivalencia correcta al uso si la necesitamos utilizar es $fn()
- $(fn);
- $().ready(fn);
- $(document).ready(fn);
- $(«.selector»).ready(fn);
Por lo que nuestro Script sería el siguiente:
- Una vez cargados todos los elementos de la página usando (window).on(‘load’, …
- Le indicamos que la capa .outer-loading se oculte con un retraso (delay) de 1 segundo y usando un efecto de difuminado (fadeOut).
|
1 2 3 |
$(window).on('load', function () { $('.outer-loader').delay(1000).fadeOut('slow'); }); |
Ya solo queda incluir el código HTML en nuestra página:
|
1 2 3 4 5 |
<div class="outer-loader"> <div class="inner-loader-img"> <p>Por favor espere ...</p> </div> </div> |
Y por último y no menos importante nuestro código CSS:
- Donde inner-loading contendrá nuestra imagen de espera.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.outer-loader { width: auto; height: 100vh; border: dotted hsl(0, 0%, 67%) 2px; display: flex; align-items: center; justify-content: center; } .inner-loader-img { text-align: center; background: url('https://loading.io/spinners/comets/lg.comet-spinner.gif') no-repeat center; background-size: contain; height: 40%; width: 40%; } p { position: relative; top: 35%; transform: translateY(-50%); padding: 35px; font-weight: bold; font-size: 0.9rem; color: hsl(0, 64%, 34%); } |
El resultado final dele ejemplo se puede comprobar en mi cuenta de jsfiddle
