JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="loader">
    <div class="vloader"></div>
    <div class="nloader">0%</div>
</div>
<div class="nowa1"></div>
<div class="nowa2"></div>
<div class="nowa3"></div>
<div class="nowa4"></div>
<div class="nowa5"></div>
<div class="nowa6"></div>
<div class="nowa7"></div>
<div class="nowa8"></div>

<div class="tempDiv"></div>

CSS

* {
    margin:0;
    padding:0;
}
body {
    font-size:62.5%;
    font-family:Tahoma;
}
.nowa1 {
    background:url(http://www.experiencetravelgroup.com/blog/wp-content/uploads/2012/04/tea-tasting.jpg);
}
.nowa3 {
    background:url(http://www.wallpage.ru/imgbig/wallpapers_49897.jpg);
}
.nowa4 {
    background:url(https://www.logodom.kz/wp-content/uploads/2024/02/Bakut-Aytbayevna_w-300x300.webp);
}

.nowa5 {
    background:url(http://www.vashsad.ua/i/gallery/wallpapers/81/1600_1200/NQEbk0Oi.jpg);
}

.nowa6 {
    background:url(http://img0.liveinternet.ru/images/attach/c/2/82/969/82969032_259775.jpg);
}

.nowa7 {
    background:url(http://manboobz.files.wordpress.com/2012/12/teapot-graphics.jpg);
}


.nowa8 {
    background:url(http://mamainheels.com/wp-content/uploads/2013/03/TeaTime_10.jpg);
}

.loader {
     z-index:5;
    width:300px;
    height:30px;
    top:50px;
    left:50%;
    margin-left:-151px;
    position:absolute;
    text-align:center;
    line-height:30px;
    background:#f4f4f4;
    border:1px solid #eee;
}
.vloader {
    float:left;
    width:0%;
    height:100%;
    position:relative;
    background:#dfdfdf;
}
.nloader {
    height:100%;
    width:100%;
    position:absolute;
    color:#666;
}

.tempDiv img {
    width:120px;
    height:80px float:left;
}

JavaScript

var divS = $('div', document);
var tempCont = $('div.tempDiv');
var loader = $('div.loader');
var vloader = $('div.vloader');
var nloader = $('div.nloader');
var imagesArray = new Array();

ArrayImg(LoadImg);

// ArrayImg(LoadImg);

function ArrayImg(callback) {
    divS.each(function () {
        var bgNext = $(this).css('background-image');
        if (bgNext !== "none") {
            bgNext = bgNext.replace(/"/g,"").replace(/url\(|\)$/ig, "");
            imagesArray.push(bgNext);
            $.unique(imagesArray);
        }
        if (!--divS.length) {
            for (var i = 0; i < imagesArray.length; i++) {
                tempCont.append('<img src="' + imagesArray[i] + '">');
            }
            if (i === imagesArray.length) callback(1);
        }
    });
}

function LoadImg(i) {
    var imgCont = $('img', tempCont);
    var allImgs = $('img', tempCont).length;
    var chunk = 100 / allImgs;
    imgCont.bind('load', function () {
        vloader.animate({ width: Math.round(i * chunk) + "%"}, 50);
        nloader.html("Loaded by " + Math.round(i * chunk) + "%");
        i++;
        LoadImg(i);
    });
}

console.log(LoadImg);