JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<div style="position:relative;display:block;width:100%;height:20px;background-color:RGB(0,0,0)">
    <span id="loadbar"
 style='position:inherit;top:0px;height:20px;left:0px;background-color:RGB(0,0,255);width:0%;display:block;'></span>
<span  style='position:absolute;top:0px;width:100%;text-align:center;height:20px;color:#ffffff;'>Loading</span>
</div>

CSS

.images{
    display:none;
    margin:0px;
    padding:0px;
    height:auto;
}

JavaScript

function loadimage() {
    imagesloaded++;
    var p = imagesloaded / total*100;
    bar.style.setProperty('width', parseInt(p, 10) + "%");
    if(i<total)
    {
    imageLoader();
        
    }
    if(imagesloaded>=total){
    images.forEach(function(e){e.style.setProperty('display','inline-block');});
    }
}
function imageLoader(){
    
    images.push(new Image());
    
    images[i].addEventListener('load', loadimage);
    images[i].src = "http://lorempixel.com/40/40?"+i;
    document.body.appendChild(images[i])
    images[i].className = 'images';
    i++;
}
var images = [],
    imagesloaded = 0,
    bar = document.getElementById('loadbar'),
    total = 50;
var i = 0;
imageLoader();imageLoader();imageLoader();imageLoader();imageLoader();