Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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
259
Visitas
4
Resp
Por claudioam hace 6 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 6 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 6 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 6 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 6 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate