0

mi pregunta es la la siguiente: ¿Como puedo hacer que en la carga de mi pagina aparezca mi porgress bar?

tengo un progress bar, hecho con css y necesito cuando le den un refresh a la pagina les aparezca el progreso y se oculte cuando tenga resultados.

investigue y en contre que lo puedo hacer desde el body, pero no tengo una idea de como mostrarlo y ocultarlo en javascrpit.

este es lo que tengo en mi codigo HTML

<body onload="cargarpagina()">

con los div creo mi progress bar en css

<div id="contenedor" class="fondo1">
                <div class="wrapper1">
                <div>
                <h1 class="color1 text-center">Cargando</h1>
            </div>
            <div class="border1">
                <div class="space1">
                    <div class="loading1">
                    </div>
                </div>
            </div>
            </div>
            </div>  
</body>

CSS:

.fondo1 {
    background: rgb(21, 155, 215);
    background: linear-gradient(90deg, rgba(21, 155, 215, 0.7791491596638656) 8%, rgba(21, 106, 215, 0.7595413165266106) 44%, rgba(0, 212, 255, 0.6671043417366946) 100%);
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.wrapper1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -100px;
    width: 200px;
    height: 20px;
}

.border1 {
    border: 4px solid #ffffff;
    height: 100%;
    width: 100%;
    padding: 4px;
}

.space1 {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 0 auto;
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.loading1 {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    animation: loading 5s steps(40) infinite;
}

.color1 {
    color: white;
    top: 50%;
}

progress bar

9
  • Hay 2 tipos de barras de progreso (por decirlo de alguna manera), una que indica el porcentaje de carga (un loading) y la otra es una animación que indica que hay algo ejecutándose (spinner). Cual quieres tu?
    – Yussef
    Commented el 11 nov. 2022 a las 19:30
  • Hola @Yussef de echo ya tengo creado mi progress bar animado en css lo que, no se, es como mostrar y ocultar cuando se cargue la pagina
    – jess
    Commented el 11 nov. 2022 a las 20:11
  • Una página se carga en orden, si lo primero que haces es mostrar el loading y lo último es ocultarlo debería funcionar. Pero para ayudarte deberías colocar el código (un ejemplo mínimo, no todo!) de como tienes estructurada tu página. Porque como te decía, hay un asunto de orden para que funcione y en lo que tu colocaste ese orden no es posible apreciarlo
    – Yussef
    Commented el 11 nov. 2022 a las 20:18
  • @Yussef ya hice los edición de mi código, lo que investigue y tuve una idea es que en esta funcion <script> window.addEventListener('load', function() { console.log('La página ha terminado de cargarse!!'); }); </script> puedo colocar un hiden
    – jess
    Commented el 11 nov. 2022 a las 20:28
  • Donde yo creo que está el truco del asunto es que al principio debes cargar lo mínimo. Por ejemplo este orden: 1) Solo el css del loading, 2) body > div del loading 3) Lo otros css de la página, 4) El resto de html de la página 5) Los script, donde estaría ese evento que pones arriba para ocultar el loading
    – Yussef
    Commented el 11 nov. 2022 a las 21:37

1 respuesta 1

0

La técnica para crear un loading que aparezca al principio de la página, es hacer que lo primero que cargue sea el loading. Apurar lo más posible su renderización en pantalla y retrasar el resto.

Como las páginas se cargan en orden, hay que colocar el loading y su estilo lo más arriba posible. Luego de él se pueden cargar el resto de los archivos CSS, JS y el mismo contenido HMTL

Finalmente con el evento document.addEventListener("DOMContentLoaded" podemos determinar cuándo se terminó de cargar la página y remover el loading

<html>
<head>
</head>

<body>

<body>

<div id="loading">
<style>
.fondo1 {
    background: rgb(21, 155, 215);
    background: linear-gradient(90deg, rgba(21, 155, 215, 0.7791491596638656) 8%, rgba(21, 106, 215, 0.7595413165266106) 44%, rgba(0, 212, 255, 0.6671043417366946) 100%);
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.wrapper1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -100px;
    width: 200px;
    height: 20px;
}

.border1 {
    border: 4px solid #ffffff;
    height: 100%;
    width: 100%;
    padding: 4px;
}

.space1 {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 0 auto;
}
</style>
  <div id="contenedor" class="fondo1">
      <div class="wrapper1"><div>
      <h1 class="color1 text-center">Cargando</h1>
  </div>
  <div class="border1">
      <div class="space1">
          <div class="loading1"></div>
      </div>
  </div>
</div>

<!-- cargo archivos css -->
<!-- resto del html -->
<!-- cargo archivos js -->

<script>
document.addEventListener("DOMContentLoaded", e => {
   document.getElementById("loading").remove();

});

</script>
</body>

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.