Какая логика работы прелоадеров в виде полосы загрузки(как тут на тостере)?

Question

[lukoie]

Есть у меня проект на ларавеле, сделал црм для ресторанного бизнеса, где анализируются всякие умные маркетинговые штуки.
Данных немного много, так что иногда при некоторых запросах оно задумывается.
Решил я на это дело сделать прелоадер как можете видеть тут на тостере вверху.
Но не могу догнать логику его работы. Вот как мне вычислять когда у меня половина или 100% уже отработает, чтобы эта полоса была хоть немного близка к правде?
Пока логика работы такова, что у жаваскрипта есть хук на начало его работы и на конец. На начале я делаю все свои запросы и ахалай-махалай, и последним делом запускаю полосу загрузки, чтобы она шла до 90%
Как только все мои запросы отработали, жаваскрипт закрывает всё что надо закрыть, и полосу на 100% уустанавливает, так что она долазит до своих 100% и потухает.
Использовать я решил готовое изделие под названием
https://github.com/jacoborus/nanobar (без жейквери, что мне понравилось и подошло)
на тостере используется ricostacruz.com/nprogress
но вот общую логику как прифигачивают эти прогрессы хотелось бы понять.

зыж нет, я понимаю что это в любом случае надувательство, и никаких пресайз процентов тут быть не может. мне это надо чтобы было видно что что-то происходит, и при этом я экран делаю некликабельным и чернобелым и немного блурю, для пущей важности. Но мне чёта кажется что это решение запулить его на 90% и ждать, это не то, как обычно живые люди делают.

Comments

[Сергей delphinpro]

Нужно уточнить, о каком прелоадере идет речь.
Что мерим — длтельность обработки бэка или загрузку фронта.
Во втором случае считаем все загружаемые элементы на странице (обычно это самое тяжёлое — картинки). На них вешаем onload и подсчитываем процент загруженных от общего количества. Так же за 100% считаем 90% полоски, на всякий случай, а остальные 10 "до-анимируем" по onload всей страницы. При этом страница отдаётся бэком, когда она уже полностью готова.
В первом случае нужно как-то рассчитывать процент выполнения операции на бэкэнде и тут уже реализация конкретно зависит от того, что нам нужно измерять.

[Сергей delphinpro]

Как-то заморочился написать сам прелоадер фронта:

Код по спойлером

/**
 * Preloader of site
 * @author      delphinpro <[e-mail]>
 * @copyright   Copyright © 2016 delphinpro
 * @license     Licensed under the MIT license
 */
'use strict';

(function () {

    var PRELOADER_DEV = false;

    function ready(fn) {
        if (document.readyState != 'loading') {
            fn();
        } else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }

    function onLoadedSite() {
        if (!PRELOADER_DEV) {
            document.body.classList.remove('is-loading');

            // Inject yandex.map api
            bYandexMapApiLoaded = true;
            var script          = document.createElement('script');
            script.src          = 'https://api-maps.yandex.ru/2.1/?lang=ru_RU';
            document.body.appendChild(script);
        }
    }

    function createTempImage(body, url) {
        var img       = document.createElement('img');
        img.className = "temp-image";
        img.src       = url;
        body.appendChild(img);
        return img;
    }

    function removeTempImage(img, totalImages, percentPerImage, beginWidth, elapsedWidth) {
        document.body.removeChild(img);
        if (totalImages == 0) {
            progressBar.classList.remove('site-preloader__progress-bar--with-animation');
            progressBar.classList.add('site-preloader__progress-bar--with-last-animation');
        }
        var percentAdding       = 100 - totalImages * percentPerImage;
        progressBar.style.width = (beginWidth + Math.round((elapsedWidth * percentAdding) / 100)) + 'px';
    }

    function getAllImages() {
        var images = [];

        // from document
        [].forEach.call(document.querySelectorAll('img'), function (img) {
            images.push(img.src);
        });


        // from styles
        var elements = document.querySelectorAll('div');
        [].forEach.call(elements, function(im){
            var bgi = getComputedStyle(im).backgroundImage;
            if (bgi != 'none' && bgi != '') {
                bgi = bgi.replace(/^url\((")?/, '');
                bgi = bgi.replace(/(")?\)$/, '');
                images.push(bgi);
            }
        });

        return images;
    }

    var styles       = document.createElement('style');
    styles.innerHTML = '' +
        '.site-preloader{display:none;position:fixed;left:0;top:0;right:0;bottom:0;background:#fff;z-index:4294967294;}' +
        '.site-preloader__progress{background:#E6E6E6;}' +
        '.site-preloader__progress-bar{background:#40A1E6;display:block;width:0;height:10px;}' +
        '.site-preloader__progress-bar--with-animation{-webkit-transition:all 3s cubic-bezier(.25,.46,.45,.94);transition:all 3s cubic-bezier(.25,.46,.45,.94);}' +
        '.site-preloader__progress-bar--with-last-animation{-webkit-transition:all 0.3s cubic-bezier(.25,.46,.45,.94);transition:all 0.3s cubic-bezier(.25,.46,.45,.94);}' +
        '.site-preloader img{opacity:0;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;}' +
        '.site-preloader .site-preloader__img--loaded{opacity:1;}' +
        '.is-loading{overflow:hidden;}' +
        '.is-loading .site-preloader{display:block;}' +
        '.hide-while-loading{-webkit-transition:opacity 1s ease;transition:opacity 1s ease;opacity:1;}' +
        '.is-loading .hide-while-loading{opacity:0;}';
    document.head.appendChild(styles);
    var preloader   = document.querySelector('#site-preloader');
    var progress    = preloader.querySelector('.site-preloader__progress');
    var progressBar = progress.querySelector('.site-preloader__progress-bar');

    var barWidth      = 0;
    var progressWidth = progress.clientWidth;

    var timer = setInterval(function () {
        barWidth++;
        progressBar.style.width = barWidth + 'px';
    }, 100);

    var splashImages = preloader.querySelectorAll('img');
    [].forEach.call(splashImages, function (img) {
        img.addEventListener('load', function () {
            this.classList.add('site-preloader__img--loaded');
        });
    });

    ready(function () {
        console.log('READY');

        clearInterval(timer);
        progressBar.classList.add('site-preloader__progress-bar--with-animation');

        var images          = getAllImages();
        var totalImages     = images.length;
        var beginWidth      = progressBar.clientWidth;
        var elapsedWidth    = progressWidth - beginWidth;
        var percentPerImage = Math.round(100 / totalImages);

        var i, len = images.length;
        for (i = 0; i < len; i++) {
            var url = images[i];
            createTempImage(document.body, url).addEventListener('load', function () {
                totalImages--;
                removeTempImage(this, totalImages, percentPerImage, beginWidth, elapsedWidth);
            });
        }
    });

    window.addEventListener('load', function () {
        console.log('LOAD');
        setTimeout(onLoadedSite, 300);
    });
})();

[lukoie]

SmInc, в моем случае достаточно просто прелоадера. Но вешать крутящийся кружок уже банально. Захотел полоску.
Про скелетон при выборе я забыл. Может при каком то из рефакторингов прикручу, спасибо.

[lukoie]

Сергей delphinpro, там просто админочка, навроде АдминЛТЕ, так что картинок там нет, просто выборки сухих данных по продажам, покупателям и т.п. по разным отрезкам времени и аналитика между разными отрезками времени. Так что тут не получится так как Вы описали. Но спасибо, логика улавливается.