CSS-Zone

Точки-набір

Три точки, що підскакують як індикатор набору. Практичний приклад для лоадерів та індикаторів стану з живим превʼю, HTML-розміткою та готовим CSS-кодом для інтеграції у продакшен.

Превʼю

HTML + CSS

<div class="dot-typing-loader">
  <span></span><span></span><span></span>
</div>

<style>
.dot-typing-loader{display:flex;gap:8px;align-items:center;}
.dot-typing-loader span{
  width:10px;height:10px;border-radius:50%;
  background:#5b8def;box-shadow:0 6px 12px rgba(91,141,239,.22);
  animation:dot-typing 1s ease-in-out infinite;
}
.dot-typing-loader span:nth-child(2){animation-delay:.12s;}
.dot-typing-loader span:nth-child(3){animation-delay:.24s;}
@keyframes dot-typing{0%,100%{transform:translateY(0);opacity:.7;}50%{transform:translateY(-8px);opacity:1;}}
</style>

Що показує анімація Точки-набір

Точки-набір — це готовий CSS-патерн, який можна швидко інтегрувати у веб-інтерфейс без зовнішніх бібліотек. Приклад демонструє базову структуру HTML та стилі, які легко масштабуються під реальний компонент у дизайн-системі.

Коли цей патерн доречний

Використовуйте цей ефект для підсилення візуального фокусу, індикації стану або мікровзаємодій у ключових частинах сторінки. Анімація має підтримувати зміст екрана, а не конкурувати з ним, тому важливо контролювати темп, контраст і розмір.

Практична інтеграція у продакшен

Скопіюйте HTML і CSS, адаптуйте змінні кольору, тривалість та easing під свій бренд, а також перевірте поведінку на мобільних пристроях. Для стабільної UX-якості додайте режим зниженого руху й тестуйте компонент у реальних сценаріях використання.