1

Quería saber cómo seria el script para poder ponerle el tiempo a este preloader que luego de 5seg o 10seg muestre el contenido o cuando cargue el contenido desaparezca el preloader, ya que solo en la pequeña guía que me ayudó a crear el preloader no me decía cómo aplicarlo a funcionar luego de que cargue el contenido en la página o unos segundo después aparezca la página.

body{
    background-color: #090211;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container{
    display: grid;
    grid-template-columns: repeat(3,20px);
    grid-template-rows: repeat(3,20px);
    transform: rotate(130deg);
}

.container span{
    display: block;
    background-color: #f22;
    animation: loading-effect 1s ease infinite;
}

/* span */

span:nth-child(3){
    animation-delay: 1s;
}
span:nth-child(2){
    animation-delay:.9s ;
}
span:nth-child(6){
    animation-delay: .9s;
}
span:nth-child(1){
    animation-delay:.8s ;
}
span:nth-child(5){
    animation-delay:.8s ;
}
span:nth-child(9){
    animation-delay:.8s ;
}
span:nth-child(4){
    animation-delay:.7s ;
}
span:nth-child(8){
    animation-delay:.7s ;
}
span:nth-child(7){
    animation-delay:.6s ;
}

@keyframes loading-effect{
    0%{
        transform: scale(0);
    }

    100%{
        transform: scale(1);
    }
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preloader....</title>
</head>
<body>
    

<div class="container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
</html>

3
  • eso que quieres se hace con javascript, no pusiste nada donde lo hayas intentado... Commented el 29 abr. 2022 a las 1:39
  • @HernánGarcia Si bro se que es con Javasecript pero no se hacer la funcion, por eso puese solo el codigo del proyecto para que me ayuden a crearlo.. o como se le puede hacer.
    – JvSoftHard
    Commented el 29 abr. 2022 a las 1:45
  • Lee Cómo preguntar: no basta con que no sepas cómo hacerlo, debes mostrar un ejemplo mínimo verificable de lo que has intentado hasta el momento (no un código que poco y nada tiene que ver con la pregunta) y explicar qué información encontraste que no pudiste implementar, o no comprendiste del todo. Stack Overflow en español no es un servicio de código. Haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 5 may. 2022 a las 17:53

2 respuestas 2

1

Antes que nada no apliques código CSS a etiquetas y menos de a las principales como main, container, body, span, div etc. ya que esto afectará a todos los elementos de tu sitio web, ahora intenta los siguiente y debe funcionar:

// Preloder script
jQuery(window).load(function(){'use strict';
    $(".preloader").delay(1600).fadeOut("slow").remove();
});
.preloader{
    background-color: #090211;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-container{
    display: grid;
    grid-template-columns: repeat(3,20px);
    grid-template-rows: repeat(3,20px);
    transform: rotate(130deg);
}

.preloader-container span{
    display: block;
    background-color: #f22;
    animation: loading-effect 1s ease infinite;
}

/* span */

.rombo:nth-child(3){
    animation-delay: 1s;
}
.rombo:nth-child(2){
    animation-delay:.9s ;
}
.rombo:nth-child(6){
    animation-delay: .9s;
}
.rombo:nth-child(1){
    animation-delay:.8s ;
}
.rombo:nth-child(5){
    animation-delay:.8s ;
}
.rombo:nth-child(9){
    animation-delay:.8s ;
}
.rombo:nth-child(4){
    animation-delay:.7s ;
}
.rombo:nth-child(8){
    animation-delay:.7s ;
}
.rombo:nth-child(7){
    animation-delay:.6s ;
}

@keyframes loading-effect{
    0%{
        transform: scale(0);
    }

    100%{
        transform: scale(1);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preloader....</title>
</head>
<body>
    
<div class="preloader">
<div class="preloader-container">
    <span class="rombo"></span>
    <span class="rombo"></span>
    <span class="rombo"></span>
    <span class="rombo"></span>
    <span class="rombo"></span>
    <span class="rombo"></span>
    <span class="rombo"></span>
    <span class="rombo"></span>
    <span class="rombo"></span>
</div></div>
</body>
</html>

Puedes poner el preloader en cualquier página que necesites antes de el resto de código

4
  • Gracias por la ayuda y el consejo voy a probar. mil gracias amigo
    – JvSoftHard
    Commented el 30 abr. 2022 a las 1:40
  • Vale, si tienes dudas me vuelves a escribir pero con eso debería funcionar
    – DANNGZSHOT
    Commented el 2 may. 2022 a las 14:42
  • mucjas gracias amigo, funciona solo tengo que adaptarlo bien pae que haga efecto en el proyecto, osea que una vez que pasen los segundos se refleje el.contenido..
    – JvSoftHard
    Commented el 4 may. 2022 a las 11:56
  • Si amigo de hecho hacerlo es bastante fácil, solo pega el código del preloader dentro de las etiquetas body en cada página html que hagas, el js te recomiendo ponerlo en un archivo js global para no inicializar en cada página y en .delay(1600) estableces el tiempo en mili-segundos que quieres que tarde, éxito en tu proyecto
    – DANNGZSHOT
    Commented el 4 may. 2022 a las 17:00
1

Hola quizas te ayude tambien esto:

// <!-- Script -->
  const loader = document.querySelector('.container');
  const cuerpo = document.querySelector('body');
  window.onload = function(){
    setTimeout(function(){
      loader.style.display = 'none';
      cuerpo.style.background = 'none';
    }, 4000); // Puedes cambiar el tiempo cada mil es 1 segundo.
  }
/* <!-- Estilos CSS --> */
body{
    background-color: #222;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container{
    display: grid;
    grid-template-columns: repeat(3,20px);
    grid-template-rows: repeat(3,20px);
    transform: rotate(130deg);
}

.container span{
    display: block;
    background-color: #f22;
    animation: loading-effect 1s ease infinite;
}

/* span */

span:nth-child(3){
    animation-delay: 1s;
}
span:nth-child(2){
    animation-delay:.9s ;
}
span:nth-child(6){
    animation-delay: .9s;
}
span:nth-child(1){
    animation-delay:.8s ;
}
span:nth-child(5){
    animation-delay:.8s ;
}
span:nth-child(9){
    animation-delay:.8s ;
}
span:nth-child(4){
    animation-delay:.7s ;
}
span:nth-child(8){
    animation-delay:.7s ;
}
span:nth-child(7){
    animation-delay:.6s ;
}

@keyframes loading-effect{
    0%{
        transform: scale(0);
    }

    100%{
        transform: scale(1);
    }
}
<body>
  <div class="container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>

2
  • Gracias amigo, probare.!!
    – JvSoftHard
    Commented el 4 may. 2022 a las 11:57
  • De nada bro, suerte!!!
    – JonatanHN
    Commented el 4 may. 2022 a las 16:39

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