CSS-Zone
Складені смуги підіймаються одна за одною. Практичний приклад для лоадерів та індикаторів стану з живим превʼю, HTML-розміткою та готовим CSS-кодом для інтеграції у продакшен.
Превʼю
HTML + CSS
<div class="stack-bounce"> <span></span><span></span><span></span> </div> <style> .stack-bounce { display:grid; gap:8px; width:120px; } .stack-bounce span{ height:10px; border-radius:8px; background: linear-gradient(135deg,#5b8def,#9a6bff); box-shadow:0 6px 18px rgba(91,141,239,.2); animation: stack-bounce 1s ease-in-out infinite; } .stack-bounce span:nth-child(2){animation-delay:.12s;} .stack-bounce span:nth-child(3){animation-delay:.24s;} @keyframes stack-bounce{0%,100%{transform:translateY(0);opacity:.85;}50%{transform:translateY(-8px);opacity:1;}} </style>
Стек, що стрибає — це готовий CSS-патерн, який можна швидко інтегрувати у веб-інтерфейс без зовнішніх бібліотек. Приклад демонструє базову структуру HTML та стилі, які легко масштабуються під реальний компонент у дизайн-системі.
Використовуйте цей ефект для підсилення візуального фокусу, індикації стану або мікровзаємодій у ключових частинах сторінки. Анімація має підтримувати зміст екрана, а не конкурувати з ним, тому важливо контролювати темп, контраст і розмір.
Скопіюйте HTML і CSS, адаптуйте змінні кольору, тривалість та easing під свій бренд, а також перевірте поведінку на мобільних пристроях. Для стабільної UX-якості додайте режим зниженого руху й тестуйте компонент у реальних сценаріях використання.