JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="contenido">
    <img src="http://lh4.ggpht.com/_PNlNpUObtu4/SDeXpK-k05I/AAAAAAAABMU/aGbdlrFQaes/View%252Bof%252Bthe%252BSierra%252BNevada%252Bfrom%252Bthe%252BMoro%252BRock.jpg" />
    <img src="http://www.celebritieswallpapers.info/views/images/gallery/Alicia_Machado_11.jpg" />
    <img src="http://i27.photobucket.com/albums/c172/bokfupig/14806_johansson0995_122_1060lo.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;
border:1px solid #666;
margin:0 auto;
margin-top:200px;
}

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

JavaScript

jQuery(function($){
        var items_cargar = $("img") //Seleccionas las imagenes a cargar 
        
        var moverse = $("#contendor-barra").width() / items_cargar.length;
        
        items_cargar.each(function(){ //Procesar cada imagen para ver si ya esta cargada o si necesita un evento "onload"
            var pic=new Image();
            pic.src= this.src;
            if(pic.complete) cargada(); else {pic.onload= cargada; pic.onError = cargada };
        })
        
        function cargada(){ // Funcion que se ejecuta cada vez que carga una imagen
                $("#barra").animate({"left": "+=" + moverse}, 100, function(){
                        if($("#barra").css("left").replace("px","") >= 0){
                                $("#pantalla_blanca").hide()
                        }            
                })
        }
            
})