Введение

Загрузчик (или индикатор загрузки) повышает удобство работы пользователя, обеспечивая визуальную обратную связь во время загрузки. В этом уроке мы создадим элегантный и современный загрузчик, используя HTML и CSS. Давайте погрузимся!

Что такое загрузчик?

Загрузчик – это анимированный элемент, указывающий на обработку контента. Это гарантирует пользователям, что приложение работает, уменьшая вероятность разочарования во время загрузки.

Зачем использовать загрузчик?

• Улучшает взаимодействие с пользователем: информирует пользователей во время ожидания.
• Улучшает эстетику: хорошо продуманный загрузчик может сделать ваш сайт более профессиональным.
• Предотвращает отказ пользователя: обеспечивая визуальную обратную связь, пользователи с меньшей вероятностью уйдут, ожидая.

Шаг 1. Настройка структуры HTML
Мы начнем с базовой структуры HTML для нашего загрузчика. Следующий код создает контейнер для загрузчика с двенадцатью полосками.

Шаг 2. Стилизация с помощью CSS
Далее мы добавим CSS для стилизации загрузчика. Вот код для создания кругового загрузчика с анимированными полосами.

`.loader {
позиция: относительная;
ширина: 54 пикселей;
высота: 54 пикселей;
радиус границы: 10 пикселей;
}

.loader div {
ширина: 8%;
высота: 24%;
фон: RGB(128, 128, 128);
позиция: абсолютная;
осталось: 50%;
верх: 30%;
непрозрачность: 0;
радиус границы: 50 пикселей;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
анимация: Fade458 1 с, линейная бесконечность;
}

@keyframes Fade458 {
от {
непрозрачность: 1;
}

к {
непрозрачность: 0,25;
}
}`

Шаг 3. Добавление анимации
Мы применим задержки вращения и анимации к каждому такту, чтобы создать эффект динамической загрузки.

`.loader .bar1 {
преобразование: поворот (0 градусов) перевод (0, -130%);
задержка анимации: 0 с;
}

.loader .bar2 {
преобразование: поворот (30 градусов) перевод (0, -130%);
задержка анимации: -1,1 с;
}

.loader .bar3 {
преобразование: поворот (60 градусов) перевод (0, -130%);
задержка анимации: -1 с;
}

.loader .bar4 {
преобразование: поворот (90 градусов) перевод (0, -130%);
задержка анимации: -0,9 с;
}

.loader .bar5 {
преобразование: поворот (120 градусов) перевод (0, -130%);
задержка анимации: -0,8 с;
}

.loader .bar6 {
преобразование: поворот (150 градусов) перевод (0, -130%);
задержка анимации: -0,7 с;
}

.loader .bar7 {
преобразование: поворот (180 градусов) перевод (0, -130%);
задержка анимации: -0,6 с;
}

.loader .bar8 {
преобразование: поворот (210 градусов) перевод (0, -130%);
задержка анимации: -0,5 с;
}

.loader .bar9 {
преобразование: поворот (240 градусов) перевод (0, -130%);
задержка анимации: -0,4 с;
}

.loader .bar10 {
преобразование: поворот (270 градусов) перевод (0, -130%);
задержка анимации: -0,3 с;
}

.loader .bar11 {
преобразование: поворот (300 градусов) перевод (0, -130%);
задержка анимации: -0,2 с;
}

.loader .bar12 {
преобразование: поворот (330 градусов) перевод (0, -130%);
задержка анимации: -0,1 с;
}`

Шаг 4. Интеграция загрузчика на ваш сайт
Чтобы использовать загрузчик в своем веб-проекте, убедитесь, что вы включили HTML и CSS в свои файлы. Поместите HTML-разметку загрузчика в нужное место, и загрузчик появится во время загрузки.

Заключение

Создание загрузчика может значительно улучшить удобство использования вашего сайта. С помощью простого HTML и CSS вы можете создать визуально привлекательный и функциональный загрузчик. Поэкспериментируйте с цветами и размерами, чтобы они соответствовали дизайну вашего сайта!