Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.08.2018, 09:02
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Тот самый прелоадер
Всем привет.

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

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

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

Последний раз редактировалось madeas, 10.08.2018 в 09:08.
Ответить с цитированием
  #2 (permalink)  
Старый 10.08.2018, 09:31
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,705

<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. сайт должен быть максимально информативным, а не иметь максимальное возможное кол-во "свистоперделок".

Последний раз редактировалось Nexus, 10.08.2018 в 09:35.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прелоадер пока выполняется скрипт agr Общие вопросы Javascript 2 11.06.2016 20:27
Jquery прелоадер razorg1991 jQuery 1 26.11.2014 15:27
Как удалить именно тот див, в котором находиться сама кнопка удаления? Wahtel Элементы интерфейса 1 21.11.2014 13:39
как получить тот кусок текста который сейчас видно на экране ? mitiya Общие вопросы Javascript 27 21.03.2013 12:21
Один и тот же ответ от разных запросов. nickgu AJAX и COMET 5 25.04.2012 23:27