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][1]][1]


  [1]: https://i.sstatic.net/76jio.png