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%;
}
<script> window.addEventListener('load', function() { console.log('La página ha terminado de cargarse!!'); }); </script>
puedo colocar un hiden