Skip to main content
este es mi progres bar creado en css
Origen Enlace
jess
  • 5
  • 3

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

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

Origen Enlace
jess
  • 5
  • 3

mostrar y ocultar el progress bar en un body html

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>