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
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
Puntos
2533
Visitas
Visitas
4
Resp
Resp
Por claudioam hace 72 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
Puntos
Por alber hace 72 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:
el siguiente paso es ocultar esta ventana una vez que la web esta cargada completamente:
demo
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í:
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
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
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
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
Puntos
Por alber hace 71 meses
Administrador