CSS-Zone
Компактна сітка пульсує в ритмі. Практичний приклад для лоадерів та індикаторів стану з живим превʼю, HTML-розміткою та готовим CSS-кодом для інтеграції у продакшен.
Превʼю
HTML + CSS
<div class="beat-grid"> <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> </div> <style> .beat-grid{width:120px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;} .beat-grid span{ aspect-ratio:1;border-radius:6px; background:linear-gradient(180deg,#5b8def,#9a6bff); animation:beat-grid 1s ease-in-out infinite; } .beat-grid span:nth-child(3n){animation-delay:.08s;} .beat-grid span:nth-child(4n){animation-delay:.16s;} .beat-grid span:nth-child(2n){animation-delay:.24s;} @keyframes beat-grid{0%,100%{transform:scale(.85);opacity:.8;}50%{transform:scale(1.15);opacity:1;}} </style>
Ритмічна сітка — це готовий CSS-патерн, який можна швидко інтегрувати у веб-інтерфейс без зовнішніх бібліотек. Приклад демонструє базову структуру HTML та стилі, які легко масштабуються під реальний компонент у дизайн-системі.
Використовуйте цей ефект для підсилення візуального фокусу, індикації стану або мікровзаємодій у ключових частинах сторінки. Анімація має підтримувати зміст екрана, а не конкурувати з ним, тому важливо контролювати темп, контраст і розмір.
Скопіюйте HTML і CSS, адаптуйте змінні кольору, тривалість та easing під свій бренд, а також перевірте поведінку на мобільних пристроях. Для стабільної UX-якості додайте режим зниженого руху й тестуйте компонент у реальних сценаріях використання.