Como hacer loading de cada pagina simple

Hola!

Busco hacer un loading (Page Loader Spinner) de espera con transicion suave para que mi pagina se vea mas pro. La idea es poner una animación gif para la espera o loading. Si hay algun atajo bueno o link de buena expliocacion porque lo que he encontrado hasta ahora va muy complicado,

slds
Editado

0
Puntos

2528
Visitas

4
Resp

Por claudioam hace 71 meses

Principiante

Respuesta #1

hola! un tema interesante.. voy a preparar un ejemplo y te lo posteo en cuanto tenga un rato, salu2!

0
Puntos

Por alber hace 71 meses

Administrador

Respuesta #2

te dejo un ejemplo completo de como hacerlo y unos pasos, lo primero es poner una ventana superpuesta en todas las paginas de la web..

esta linea ah de estar justo después de <body> es decir al principio de la pagina:

<div class="loading"><img src="https://datoweb.com/img/post/3_21_gear-datoweb.gif"></div>

ahora el css para esa capa:

.loading {
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #eee;
	}
	.loading img {
		position: fixed;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		margin-left: -41px;
		margin-top: -41px;
	}

con esto conseguirás algo así:
gear-datoweb

el siguiente paso es ocultar esta ventana una vez que la web esta cargada completamente:

$(document).ready(function(){
		//Ocultamos en loading una vez que la pagina ah cargado
		$('.loading').fadeOut(200);
	});

con esto ya tienes el efecto que deseas

demo

2
Puntos

Por alber hace 71 meses

Administrador

Respuesta #3

muy bueno, simple y directo. me funcionó cuando lo hice en una pagina. Lo que si debo poner el codigo script, y css en cada pagina que quiero el efecto? o puedo hacer iuna llamada link en el head? porque intenté poner el codigo en efectos.js y en estilos.css y no salió el efecto, pero lo puse directo en dos paginas diferentes y me resulto.

0
Puntos

Por claudioam hace 71 meses

Principiante

Respuesta #4

pues poner el css es tu fichero estilos.css pero ten en cuenta que tiene que estar arriba entre <head> y </head> para que el css cargue antes que el body ;)

respecto al js también puedes ponerlo dentro de tu fichero .js ya que el fadeOut se ejecuta cuando todo el documento esta cargado

si no te funciona el tema del css refresca la cache del navegador y veras los cambios

slds

2
Puntos

Por alber hace 71 meses

Administrador