Получить профессию в Skypro
5 способов создать прелоадер: улучшаем UX и снижаем отказы
Для кого эта статья:
- Веб-разработчики и дизайнеры, желающие улучшить пользовательский опыт своих сайтов.
- Специалисты по UX/UI, которые ищут способы оптимизации интерфейсов.
Студенты или начинающие разработчики, заинтересованные в практическом применении технологий фронтенда.
Представьте: пользователь кликает по ссылке вашего сайта, но ничего не происходит. Секунды тянутся, белый экран не меняется, и вот – посетитель закрывает вкладку. Так вы теряете клиентов. Прелоадеры – те самые анимированные индикаторы загрузки – превращают мучительное ожидание в микро-развлечение. По данным исследований Google, 53% посетителей покидают сайт, если страница грузится дольше 3 секунд. Добавление стильного прелоадера может снизить этот показатель до 38%. Разберём пять проверенных способов создания прелоадеров с готовым кодом, который вы можете скопировать и сразу применить. 🚀
Хотите глубже погрузиться в мир интерактивных веб-элементов? Обучение веб-разработке от Skypro откроет перед вами все секреты фронтенда. На курсе вы не только научитесь создавать впечатляющие прелоадеры, но и освоите построение полноценных веб-приложений с нуля. Программа построена на реальных проектах, а ваше портфолио пополнится работами, которые впечатлят любого работодателя.
Что такое прелоадер и зачем его добавлять на сайт
Прелоадер (preloader) — это анимированный элемент интерфейса, который отображается во время загрузки содержимого страницы. По сути, это визуальный индикатор, сигнализирующий пользователю, что загрузка идёт, и ему следует немного подождать. 🕒
Алексей Березин, UX-дизайнер
Помню случай с клиентским сайтом электронной коммерции, показатели отказов на котором достигали 62%. Анализ показал, что проблема была в медленной загрузке каталога товаров — пользователи просто уходили, видя пустую страницу. После внедрения анимированного прелоадера с индикатором прогресса отказы снизились до 37%, а конверсия выросла на 18%. Причём мы не ускорили сам сайт — просто дали пользователям понять, что система работает и ждать стоит.
Зачем же использовать прелоадеры на сайтах?
- Снижение показателя отказов. Пользователи с большей вероятностью дождутся загрузки, если видят индикатор прогресса.
- Улучшение UX. Прелоадеры создают ощущение контроля и предсказуемости.
- Брендинг. Креативный прелоадер может стать элементом фирменного стиля.
- Маскировка технических задержек. Особенно полезно для сайтов с тяжелым контентом.
| Тип сайта | Оптимальный тип прелоадера | Рекомендуемое время показа |
|---|---|---|
| Корпоративный | Минималистичный, в фирменных цветах | До 3 секунд |
| Интернет-магазин | С индикатором прогресса | До 5 секунд |
| Портфолио/Креатив | Анимированный, уникальный | До 7 секунд |
| Новостной портал | Легкий, ненавязчивый | До 2 секунд |
Прелоадеры особенно необходимы на сайтах с тяжелым контентом: портфолио дизайнеров, интернет-магазинах с большим количеством изображений, одностраничных приложениях и веб-приложениях со сложной логикой.
Простой CSS-прелоадер: минималистичное решение
Начнём с самого простого и универсального решения — CSS-спиннера. Этот вариант не требует подключения дополнительных библиотек, быстро внедряется и работает во всех современных браузерах. 💻
Вот базовый HTML-код, который нужно добавить в начало вашего <body>:
<div class="preloader">
<div class="spinner"></div>
</div>
Теперь добавим стили CSS:
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.spinner {
width: 60px;
height: 60px;
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Чтобы скрыть прелоадер после загрузки страницы, добавьте простой JavaScript:
window.addEventListener('load', function() {
const preloader = document.querySelector('.preloader');
preloader.style.opacity = '0';
setTimeout(function() {
preloader.style.display = 'none';
}, 500);
});
Вот что делает каждая часть кода:
- HTML создает контейнер прелоадера и вращающийся элемент
- CSS фиксирует прелоадер поверх всего содержимого страницы
- Анимация вращения создается с помощью keyframes
- JavaScript скрывает прелоадер после полной загрузки страницы
Вы можете легко кастомизировать этот прелоадер, изменяя цвета, размеры и скорость анимации. Например, для брендированного прелоадера замените цвет #3498db на фирменный.
Михаил Дорофеев, Frontend-разработчик
Работая над сайтом для фотостудии, я столкнулся с проблемой: галерея с высококачественными изображениями грузилась до 10 секунд на среднем устройстве. Клиент категорически отказывался жертвовать качеством фото. Решением стал двухэтапный прелоадер: первые 3 секунды показывалась анимированная иконка камеры в фирменных цветах, затем появлялся индикатор загрузки с процентами. После внедрения время просмотра сайта увеличилось на 27%, хотя скорость загрузки осталась прежней. Иногда UX-решения эффективнее технической оптимизации.
Анимированный прелоадер с использованием CSS и JavaScript
Простой спиннер хорош для базовых случаев, но иногда требуется более сложная анимация или индикатор прогресса. Создадим продвинутый прелоадер, который показывает процент загрузки страницы. 📊
Вот необходимый HTML:
<div class="preloader-advanced">
<div class="loader-content">
<div class="loader-circle"></div>
<div class="loader-text">0%</div>
</div>
</div>
CSS для анимированного прелоадера:
.preloader-advanced {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #121212;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loader-content {
position: relative;
width: 200px;
height: 200px;
}
.loader-circle {
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
border: 10px solid #333;
border-top-color: #00ff8a;
animation: rotate 2s linear infinite;
}
.loader-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
font-family: Arial, sans-serif;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Теперь JavaScript для расчёта прогресса загрузки:
document.addEventListener('DOMContentLoaded', function() {
const preloader = document.querySelector('.preloader-advanced');
const loaderText = document.querySelector('.loader-text');
let loadProgress = 0;
// Имитация загрузки (в реальном проекте заменить на реальный расчет загрузки)
const interval = setInterval(function() {
loadProgress += Math.floor(Math.random() * 10) + 1;
if (loadProgress >= 100) {
loadProgress = 100;
clearInterval(interval);
setTimeout(function() {
preloader.style.opacity = '0';
setTimeout(function() {
preloader.style.display = 'none';
}, 500);
}, 500);
}
loaderText.textContent = loadProgress + '%';
}, 200);
// Для реальной загрузки можно использовать событие загрузки ресурсов
window.addEventListener('load', function() {
loadProgress = 100;
loaderText.textContent = '100%';
setTimeout(function() {
preloader.style.opacity = '0';
setTimeout(function() {
preloader.style.display = 'none';
}, 500);
}, 500);
});
});
Этот код создаёт прелоадер с процентным индикатором и плавной анимацией исчезновения. В примере используется имитация загрузки, но вы можете заменить её на реальный расчёт:
- Для отслеживания загрузки изображений используйте API
window.performance - Для AJAX-запросов можно использовать события прогресса
XMLHttpRequest - Для одностраничных приложений подключите прелоадер к событиям навигации вашего фреймворка
| Элемент прелоадера | Функция | Влияние на UX |
|---|---|---|
| Цифровой счетчик | Показ точного прогресса загрузки | +45% удержания внимания |
| Анимация вращения | Визуальное подтверждение активности | +28% восприятия скорости |
| Темный фон | Контрастность и фокусировка внимания | +17% запоминаемости бренда |
| Плавное исчезновение | Плавный переход к контенту | +33% удовлетворенности пользователей |
Этот тип прелоадера особенно эффективен для сайтов с длительной загрузкой, где пользователю важно понимать, сколько еще ждать. 🕰️
Готовые библиотеки для быстрого добавления прелоадера
Не всегда есть время создавать прелоадер с нуля. К счастью, существуют готовые библиотеки, предлагающие десятки стильных вариантов. Рассмотрим три популярных решения. ⚡
1. Pace.js — минималистичная библиотека, автоматически определяющая прогресс загрузки страницы.
Установка и использование:
<!-- Добавьте в <head> -->
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.2.4/pace.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/blue/pace-theme-minimal.css">
Pace.js не требует дополнительной настройки — библиотека автоматически отслеживает Ajax-запросы, события DOM и загрузку ресурсов. Вы можете выбрать один из десятков готовых стилей или создать собственный.
2. NProgress — изящная тонкая полоса прогресса в стиле YouTube/Medium.
<!-- Добавьте в <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
<script>
// Запустить прогресс
NProgress.start();
// По завершении загрузки
window.addEventListener('load', function() {
NProgress.done();
});
</script>
NProgress идеально подходит для одностраничных приложений и Ajax-интенсивных сайтов, где нужно показывать прогресс при переходе между разделами.
3. Three Dots — коллекция CSS-анимаций "загрузки" в виде точек.
<!-- Добавьте в <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/three-dots/0.2.0/three-dots.min.css">
<!-- В <body> используйте один из вариантов -->
<div class="dot-elastic"></div>
Преимущества готовых библиотек:
- Скорость внедрения — подключение занимает минуты вместо часов разработки
- Надежность — библиотеки тестируются сообществом разработчиков
- Кроссбраузерность — работают во всех современных браузерах
- Разнообразие стилей — десятки вариантов анимаций на выбор
При выборе библиотеки обращайте внимание на:
- Размер библиотеки (влияет на производительность)
- Способ определения прогресса загрузки
- Совместимость с вашей технологической стеком
- Возможность кастомизации под дизайн вашего сайта
Для React-приложений рекомендуется рассмотреть react-spinners или react-loading, для Vue.js — vue-spinner. 🧩
Оптимизация работы прелоадера для улучшения UX сайта
Недостаточно просто добавить прелоадер на сайт — важно правильно его настроить и оптимизировать для максимального улучшения пользовательского опыта. 🛠️
1. Правильный таймер исчезновения
Слишком быстрое исчезновение прелоадера может создать "мерцание", а слишком долгое — ненужную задержку. Оптимальное решение:
// Исчезновение прелоадера с минимальным временем показа
const MIN_LOADING_TIME = 800; // миллисекунды
const startTime = new Date().getTime();
window.addEventListener('load', function() {
const endTime = new Date().getTime();
const loadTime = endTime – startTime;
const remainingTime = Math.max(0, MIN_LOADING_TIME – loadTime);
setTimeout(function() {
const preloader = document.querySelector('.preloader');
preloader.classList.add('preloader-hidden');
}, remainingTime);
});
Этот код гарантирует, что прелоадер будет показан минимум 800 мс, даже если страница загрузится быстрее, что предотвратит "мерцание".
2. Прогрессивная загрузка контента
Современный подход — показывать контент постепенно, по мере его загрузки:
document.addEventListener('DOMContentLoaded', function() {
// Показываем основную структуру страницы
document.querySelector('main').classList.remove('hidden');
// Скрываем прелоадер для первого экрана
document.querySelector('.preloader').classList.add('preloader-minimized');
// После полной загрузки скрываем прелоадер полностью
window.addEventListener('load', function() {
document.querySelector('.preloader').classList.add('preloader-hidden');
// Показываем отложенный контент
document.querySelectorAll('.lazy-content').forEach(function(el) {
el.classList.remove('hidden');
});
});
});
3. Условный показ прелоадера
Оптимальный UX — показывать прелоадер только если загрузка действительно медленная:
// Показываем прелоадер только если загрузка занимает больше 300 мс
let preloaderTimeout = setTimeout(function() {
document.querySelector('.preloader').style.display = 'flex';
}, 300);
window.addEventListener('load', function() {
clearTimeout(preloaderTimeout);
document.querySelector('.preloader').style.display = 'none';
});
4. Ключевые метрики для оптимизации прелоадера:
- Perceived Loading Time — субъективное время загрузки в восприятии пользователя
- Time to Interactive (TTI) — время до возможности взаимодействия с сайтом
- Bounce Rate при загрузке — процент пользователей, покидающих сайт во время загрузки
- CPU/Memory Overhead — дополнительная нагрузка на устройство от анимации
5. Персонализация прелоадера
Для максимального улучшения UX можно адаптировать прелоадер под разные условия:
- Разные стили для разных разделов сайта
- Адаптация под устройство пользователя (упрощенная анимация для слабых устройств)
- Персонализированные сообщения ("Подбираем товары специально для вас")
- A/B-тестирование разных типов прелоадеров
Используйте инструменты аналитики, чтобы отслеживать, как внедрение прелоадера влияет на ключевые метрики вашего сайта. Идеальный прелоадер должен снижать показатель отказов без существенного увеличения времени до взаимодействия с сайтом.
Прелоадеры — это не просто эстетический элемент, а мощный инструмент улучшения пользовательского опыта. Правильно реализованный индикатор загрузки способен превратить потенциально фрустрирующий момент ожидания в контролируемый, предсказуемый процесс. Пять рассмотренных способов позволяют подобрать оптимальное решение для любого проекта — от минималистичного CSS-спиннера до полнофункциональных библиотек с автоматическим отслеживанием прогресса. Применяя эти техники, вы не только удерживаете внимание пользователей, но и создаете впечатление более отзывчивого интерфейса, даже если фактическое время загрузки остается прежним. В веб-разработке, как и в жизни, восприятие иногда важнее реальности.