JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="pantalla_blanca">
    <div id="contendor-barra">
        <div id="barra"></div>
    </div>
</div>

<div id="contenido">
    <img width="100" height="100" src="http://lh4.ggpht.com/_PNlNpUObtu4/SDeXpK-k05I/AAAAAAAABMU/aGbdlrFQaes/View%252Bof%252Bthe%252BSierra%252BNevada%252Bfrom%252Bthe%252BMoro%252BRock.jpg" />
    <img width="100" height="100" src="http://www.celebritieswallpapers.info/views/images/gallery/Alicia_Machado_11.jpg" />
    <img width="100" height="100" src="http://i27.photobucket.com/albums/c172/bokfupig/14806_johansson0995_122_1060lo.jpg" />
        <img width="100" height="100" src="http://img.techpowerup.org/090830/37.jpg" />
                <img width="100" height="100" src="http://4.bp.blogspot.com/_VuhDCbigw-g/TUyIsCihN4I/AAAAAAAACg8/pUR-zvqEFMY/s1600/niceass7.jpg" />
                <img width="100" height="100" src="http://193.105.21.101/image/19196/nice_ass_1280x800.jpg" />
                   <img width="100" height="100" src="http://1.bp.blogspot.com/-l2SkFFD1De0/TV-bN0W6j-I/AAAAAAAAAv8/i1CEcUe1ODg/s1600/.Hot%2BPerfect%2BGirls%2B-%2BFreeHD.Blogspot.Com%2B%2B%252528108%252529.jpg" />

 
</div>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}



/* Lo anterior es solo el reset.css para que se vea igual en todos los navegadores.  Aqui comienza el codigo CSS de verdad */

#barra {
    position:absolute;
    left:-300px;
    width:100%;;

    top:0;
background-color:#090;
height:40px;
}

#contendor-barra{
    position:relative;
width:300px;
overflow:hidden;
height:40px;
margin:0 auto;
margin-top:200px;
background-color:#CCC;
}

#pantalla_blanca{
    width:100%;
    height:100%;
    position:fixed;
    background-color:#FFF;
    top:0;
    left:0;
    
}

JavaScript

var items_cargar = document.getElementsByTagName("img") //Seleccionas las imagenes a cargar 
        var moverse = document.getElementById("contendor-barra").offsetWidth / items_cargar.length;
       
       for(var x=0; x<items_cargar.length;x++){
            var pic=new Image();
            pic.src= items_cargar[x].src;
            if(pic.complete) cargada(); else {pic.onload= cargada; pic.onError = cargada };
        }
        
        function cargada(){ // Funcion que se ejecuta cada vez que carga una imagen
       
               var barra = document.getElementById("barra");
             var total_move = barra.offsetLeft+moverse
//             alert(total_move)

             barra.style.left = total_move + "px"
             
             
             if(barra.style.left.replace("px","") >= 0){                 
                document.getElementById("pantalla_blanca").style.display = "none";
             }
             
            
        }