1

Estoy tratando de crear alguna animación o git para la transición de la carga de una pagina, osea miestras carga. Poner algo como "cargando" con algún efecto. He conseguido esta loagind buscando, pero no se como debe ponerse solo cuando carga la pagina. Dejo el ejemplo de lo creado, me falta saber implementar para esas esperas que se dan mientras se carga una pagina. He visto mas efectos por ahí, esto es solo una idea, me da lo mismo el efecto que sea, la cosa es saber como implementar en mi sitio web para alegrar la espera de alguna manera. Gracias.

    var container = document.getElementById('container');
setTimeout(function() {
	container.classList.add('cerrar');
  document.body.style.overflowY= "visible";// despueés de cargar le devolvemos el scroll
}, 20000);
body {
	margin: 0;
  overflow-Y: hidden; /*quitar el scroll*/
}

.container {
	position: absolute;
	top: 0;
	background: #222;
	color: #fff;
	width: 100%;
	min-height: 100vh;
	display: flex;
}

.preloader {
	margin: auto;
	
	width: 350px;
	height: 30px;
	background: rgba(255,255,255,0.1);
	
	position: relative;
}

.preloader:before {
	content: "";
	position: absolute;
	background: green;
	width: 0;
	height: 30px;
	
	animation: preloader 10s infinite;
}

.preloader p {
	margin: 0;
	line-height: 30px;
	font-size: 25px;
	font-weight: bold;
	
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.cerrar {
	transform: translateY(-100%);
	transition: all 0.5s;
}

@keyframes preloader {
	90% {
		width: 100%;
		opacity: 1;
	}
	100% {
		width: 100%;
		opacity: 0;
	}
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="probando.css" rel="stylesheet">

</head>

<body>
        <div class="container" id="container">
                <div class="preloader">
                    <p>Cargando</p>
                </div>
            </div>
            
            <h1>Bienvenidos a mi página</h1>
            <p>Este texto se muestra luego de haber cargado la página</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ducimus beatae reprehenderit rem tenetur sapiente, repudiandae officia quam libero aspernatur quod possimus voluptatum iusto minus a, enim culpa. Itaque, fuga!</p>
    <p>Sed similique error molestias est, consequuntur quam quis necessitatibus nam, eum amet fugiat mollitia obcaecati molestiae ut praesentium perferendis repudiandae nostrum perspiciatis voluptate, nulla? Impedit, repellendus ullam modi doloribus quae.</p>

    <script src="probando.js"></script>
</body>

</html>

1
  • Podrías echar un vistazo a esta página, para lo cual se requiere jquery
    – Lenin
    Commented el 16 dic. 2017 a las 1:25

1 respuesta 1

10

Buenas amigo espero esto sea lo que buscas al iniciar esta activo el loader mientras la pagina carga para saber cuando la pagina esta completamente cargada usamos el método load y quitamos el loader para que el usuario pueda ver la pagina.

Espero te ayude.

NOTA:para el ejemplo uso setTimeout() para simular el retraso en cargar la pagina para el uso real solo agregar el codigo dentro del metodo load sin el setTimeout()

Ejemplo funcional

$(window).on('load', function () {
      setTimeout(function () {
    $(".loader-page").css({visibility:"hidden",opacity:"0"})
  }, 2000);
     
});
  .loader-page {
    position: fixed;
    z-index: 25000;
    background: rgb(255, 255, 255);
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:all .3s ease;
  }
  .loader-page::before {
    content: "";
    position: absolute;
    border: 2px solid rgb(50, 150, 176);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-sizing: border-box;
    border-left: 2px solid rgba(50, 150, 176,0);
    border-top: 2px solid rgba(50, 150, 176,0);
    animation: rotarload 1s linear infinite;
    transform: rotate(0deg);
  }
  @keyframes rotarload {
      0%   {transform: rotate(0deg)}
      100% {transform: rotate(360deg)}
  }
  .loader-page::after {
    content: "";
    position: absolute;
    border: 2px solid rgba(50, 150, 176,.5);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-sizing: border-box;
    border-left: 2px solid rgba(50, 150, 176, 0);
    border-top: 2px solid rgba(50, 150, 176, 0);
    animation: rotarload 1s ease-out infinite;
    transform: rotate(0deg);
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader-page"></div>
  <h1>Contenido de la pagina</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

6
  • Gracias @Luis Daniel Rovira Contreras. ¿esto deberia ponerlo en todas las paginas que tenga mi sitio web, verdad...? Commented el 16 dic. 2017 a las 2:17
  • 1
    si amigo y así tienen el mismo loader y claro esta a tu gusto como hacerlo lo importante es la funcion load de jquery que te dice cuando quitarlo porque todo esta listo Commented el 16 dic. 2017 a las 2:19
  • Gracias @Luis Daniel Rovira Contreras, si que funciona en la pagina principal, pero al entrar en la de contacto (que esla que tarda en cargar ) no funciona, colocando el mismo codigo en las dos. Quiza tengas alguna idea de porque aunque se que es una pregunta absurda sin ver el codigo. Perdona por la molestia. Commented el 17 dic. 2017 a las 13:11
  • amigo tienes que revisar puede ser la libreria o que no agregaste algo es importante agregar el html css y js en cada una de las paginas o que cada pagina llame a los 3 espero te ayude saludos Commented el 17 dic. 2017 a las 13:52
  • 1
    Es por que la pagina ya esta cargada y almaceno la cache del lado del cliente, siempre la primera vez que carga la pagina dura mucho mas tiempo porque no a guardado nada en la cache del cliente. Commented el 17 dic. 2017 a las 15:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.