CSS-Zone

Танок ліній

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

Превʼю

HTML + CSS

<div class="line-dance">
  <span></span><span></span><span></span><span></span><span></span>
</div>

<style>
.line-dance { display:flex; gap:8px; align-items:flex-end; height:64px; }
.line-dance span {
  width:8px; height:32px; border-radius:999px;
  background: linear-gradient(180deg, #5b8def, #9a6bff);
  box-shadow: 0 8px 18px rgba(91, 141, 239, 0.25);
  animation: line-dance 1s ease-in-out infinite;
}
.line-dance span:nth-child(2){animation-delay:.08s;}
.line-dance span:nth-child(3){animation-delay:.16s;}
.line-dance span:nth-child(4){animation-delay:.24s;}
.line-dance span:nth-child(5){animation-delay:.32s;}
@keyframes line-dance {0%,100%{transform:scaleY(.5);opacity:.7;}50%{transform:scaleY(1.2);opacity:1;}}
</style>

Що показує анімація Танок ліній

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

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

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

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

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