Форум

madeas · #1 (**permalink**) 10.08.2018, 09:02

Всем привет.

Сорри за банальный вопрос, но. Посоветуйте решение, как сделать прелоадер для сайта, выполняющий следующие задачи:
1. чтобы в него можно было добавить любой текст, лого, свг и пр.,
2. а под ним(п.1) сделать шкалу загрузки или цифры типа 0 - 100%. Но, чтобы прогресс шел не сам по себе или повторялся, а по мере подгрузки контента. Как бы с паузами, если что-то долго грузится + чтобы можно было настраивать размер шрифта шкалы.
3. где-нибудь в углу добавить кнопку-крестик "отключить", на случай, если прелоадер зависнет.

Есть много различных решений, в том числе и готовые "библиотеки" предлагающие использовать их картинки, но выполняющих все задачи сразу не видел. Только на крутых сайтах) Обычно все ставят гифку, которая крутится сама по себе. Я когда-то тоже ставил похожий вариант, но мне кажется, что он не очень практичен, так как иногда случается такое, что прелоадер грузится, но сайт все равно не открывается. Короче подглючивает.

Кому не сложно, поделитесь кодом, желательно с комментариями обработчиков. Может быть, кому-то потом тоже пригодится, да и вам будет интересно поиграться с кодом.
Заранее спасибо.

Nexus · #2 (**permalink**) 10.08.2018, 09:31

<body>
<div id="mega-puper-loader" style="display:block;">Any content. <span class="process">0</span>%</div>
<!-- some part of html -->
<script>document.querySelector('#mega-puper-loader .process").textContent=50;</script>
<!-- some part of html -->
<script>
const loaderProcess=document.querySelector('#mega-puper-loader .process");
loaderProcess.textContent=100;
setTimeout(node=>node.style.display='none',1000,loaderProcess.parentNode);
</script>
</body>

Ps. сайт должен быть максимально информативным, а не иметь максимальное возможное кол-во "свистоперделок".

Форум

Справочник

Discord чат

Курсы javascript