Лоадер в виде волны из точек

Предварительный просмотр

Три варианта размера отображаются на темном фоне.

Варианты использования и функции

• Отображение загрузки/обработки: используется для уведомления пользователя об ожидании при выполнении запроса API, получении данных и т. д.

• Вы можете свободно изменять количество точек: просто добавьте или удалите элемент div.dot в HTML.

• Чистый CSS: JavaScript не требуется. Может быть встроен непосредственно в элементы дисплея.

• Специальные возможности: совместимость с программой чтения с экрана путем добавления aria-label="Loading" и role="status".

##Точки дизайна и UX

1. Задержка 0,16 секунды для каждой точки: эта задержка создает волнообразный визуальный ритм.

2. Кривая плавности выхода: каждая точка имеет упругий отскок.

3. Затухание непрозрачности: легкий танцующий визуальный эффект за счет уменьшения непрозрачности по мере ее увеличения.

Как настроить

Варианты размеров (SM/MD/LG)

.dot-sm { width: 8px; height: 8px; }

.dot-md { width: 12px; height: 12px; }

.dot-lg { width: 18px; height: 18px; }

Изменение скорости анимации

/* Быстрее */

.dot { animation-duration: 0.8s; }



/* поздно */

.dot { animation-duration: 2s; }

Пользовательский цвет

.dot { background: #f97316; } /* оранжевый */

Код реализации

<div class="dots-row" role="status" aria-label="Loading">

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

</div>



<style>
.dots-row { display: flex; align-items: center; gap: 0.5rem; }

.dot {

width: 12px; height: 12px;

border-radius: 50%;

background: #6366f1;

animation: dots-wave 1.4s ease-in-out infinite;

}

.dot:nth-child(1) { animation-delay: 0s; }

.dot:nth-child(2) { animation-delay: 0.16s; }

.dot:nth-child(3) { animation-delay: 0.32s; }

.dot:nth-child(4) { animation-delay: 0.48s; }

.dot:nth-child(5) { animation-delay: 0.64s; }

@keyframes dots-wave {

0%, 60%, 100% { transform: translateY(0); opacity: 1; }

30% { transform: translateY(-12px); opacity: 0.7; }

}
</style>

Статус совместимости браузера

| Браузер | Статус совместимости |

|--------|-------|

| Хром 43+ | ✅ Полностью совместим |

| Firefox 16+ | ✅ Полностью совместим |

| Сафари 9+ | ✅ Полностью совместим |

| Край 79+ | ✅ Полностью совместим |