IMAGEN CARGANDO la Página web/Blog + Ejemplos

Te explico cómo añadir una imagen cargando la página web/blog también conocido como preloader/precargar/loading. Y no será necesario usar de ningún plugin, funciona muy bien en Blogger y WordPress.

Hola, soy Gabriela de peengler.com. A continuación te voy a enseñar cómo aplicar el código del preloader en tu sitio.

Sin más que decir ¡empecemos!

Clic en la imagen para ver el vídeo ↑ en YouTube

¿Qué es un preloader o imagen cargando?

Un ‘preloader’ tiene como objetivo entretener a tus visitantes mientras se cargan todos los elementos de tu sitio. Y puede que mejore la experiencia del usuario al menos que se tarde demasiado tu blog en cargar. Eso sería un fastidio, en ese caso intenta de mejorar la carga y después aplicarías este efecto.

Mostrar la imagen cargando la página web/blog

Para que se muestre tu imagen o gif debes buscar <body> y agrega el siguiente código abajo de este:


<div class='body__preloader'>
<div id='loading'> </div>
</div>

Aplicar los estilos del Preloader

Si usas wordpress, aplica dentro de tu hoja de estilos lo siguiente:

Si usas Blogger Busca ]]></b:skin> y arriba de este pega lo siguiente:


.body__preloader{position:fixed;z-index:999999999999999999999;width:100%;height:100%;left:0;top:0;background-color:#fff;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;opacity:1;visibility:visible}
.body__preloader.loaded{opacity:0;visibility:hidden;z-index:-2}
#loading{display:block;position:relative;z-index:1001;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;background:url(https://www.peengler.com/wp-content/uploads/blogger-gif.gif) no-repeat center center;background-size:60%;}

Puedes cambiar la imagen cargando: https://www.peengler.com/wp-content/uploads/blogger-gif.gif por la que tú quieras.
Cambia el tamaño de la imagen en background-size: 60%
Si quieres cambiar el color blanco de fondo, es en background-color:#fff

Script del efecto loading

Para que funcione la imagen cargando la página web/blog debes agregar arriba del </body> lo siguiente:


<script>
$(window).bind(&quot;load&quot;,function () {
$(&#39;.body__preloader&#39;).addClass(&quot;loaded&quot;);
})
</script>

Guardas los cambios y listo.

Si no te llega funcionar, es porque en tu plantilla falta agregar el jquery


<script crossorigin='anonymous' integrity='sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=' src='https://code.jquery.com/jquery-3.6.0.min.js'/>

Ejemplos de Preloader Gratis/free

Puedes usar cualquiera de estas imágenes (gif) cargando/loading en tu sitio.

En conclusión

Espero que te funcione el efecto de la imagen cargando en tu sitio. La verdad es que se ve bastante bien este truco en el blog. Recuerda que puedes ver el vídeo tutorial Cómo hacer el EFECTO CARGANDO PÁGINA en el Blog

¿Te gusto el contenido? Deja tu opinión en los comentarios.

Sígueme en Youtube🔥

Aprende a crear páginas web con HTML, CSS y Javascript.

Me interesa

¿Te gusto el post?

¡Compártelo!