Прелоадеры – это анимации, отображающиеся во время загрузки сайта. Они улучшают пользовательский опыт, удерживая внимание посетителя до полной загрузки страницы. Рассмотрим два простых способа создания прелоадера.
NProgress.js: элегантный прогресс-бар
Первый способ – использование плагина NProgress.js. Это простой и эффективный инструмент для создания стильного прогресс-бара.
После загрузки архива необходимо перенести файлы nprogress.css и nprogress.js в папку проекта. Подключите эти файлы к HTML-странице:
<link rel="stylesheet" href="nprogress.css">
<script src="nprogress.js"></script>Для запуска анимации прогресс-бара используйте метод NProgress.start(). Он инициализирует анимацию, и полоса прогресса начнет заполняться. Для завершения анимации используется метод NProgress.done().
$(document).ready(function() {
NProgress.start();
setTimeout(NProgress.done, 4000);
});В этом примере прогресс-бар завершает свою работу через 4 секунды. В реальном проекте NProgress.done() можно вызывать после полной загрузки всех элементов страницы, например, используя событие window.onload.
NProgress.js также предлагает методы NProgress.inc() для постепенного увеличения полосы прогресса и NProgress.set(число), позволяющий задать процент заполнения (число от 0 до 1). Например, NProgress.set(0.5) установит полосу на 50%.
Конструктор прелоадеров: создание уникальной анимации
Второй способ – воспользоваться конструктором прелоадеров. Этот инструмент позволяет создавать собственные уникальные прелоадеры с различными анимациями, цветами и настройками.
Конструктор предоставляет широкий выбор готовых анимаций. Вы можете выбрать анимацию, настроить задержку её отображения после полной загрузки страницы (например, 1 секунда), а также изменить цвет фона. После настройки прелоадера конструктор предоставит код для вставки на ваш сайт. Просто скопируйте сгенерированный код и вставьте его перед закрывающим тегом </body> вашего HTML-файла.
Например, выбрав анимацию «сердечки» и красный фон, а затем задав задержку в 4 секунды, вы получите прелоадер, который будет отображаться 4 секунды после загрузки страницы, после чего исчезнет.
Оба рассмотренных метода позволяют легко и эффективно добавить красивый и функциональный прелоадер на ваш сайт. Выбор между NProgress.js и конструктором прелоадера зависит от ваших предпочтений и требуемого дизайна. NProgress.js подходит для простого прогресс-бара, а конструктор позволяет создавать более сложные и настраиваемые анимации.