CSS-Zone
Блік, що ковзає по треку. Практичний приклад для лоадерів та індикаторів стану з живим превʼю, HTML-розміткою та готовим CSS-кодом для інтеграції у продакшен.
Превʼю
HTML + CSS
<div class="beam-loader"><span class="beam-loader__track"></span></div> <style> .beam-loader { width:180px; height:12px; border-radius:999px; background: rgba(91,141,239,0.08); border:1px solid rgba(91,141,239,0.15); overflow:hidden; position:relative; box-shadow: inset 0 1px 0 rgba(91,141,239,0.15); } .beam-loader__track{ position:absolute; inset:0; width:60%; background: linear-gradient(90deg, transparent, rgba(91,141,239,.65), transparent); animation: beam-slide 1.1s ease-in-out infinite; } @keyframes beam-slide{0%{transform:translateX(-80%);}100%{transform:translateX(140%);}} </style>
Промінь-лоадер — це готовий CSS-патерн, який можна швидко інтегрувати у веб-інтерфейс без зовнішніх бібліотек. Приклад демонструє базову структуру HTML та стилі, які легко масштабуються під реальний компонент у дизайн-системі.
Використовуйте цей ефект для підсилення візуального фокусу, індикації стану або мікровзаємодій у ключових частинах сторінки. Анімація має підтримувати зміст екрана, а не конкурувати з ним, тому важливо контролювати темп, контраст і розмір.
Скопіюйте HTML і CSS, адаптуйте змінні кольору, тривалість та easing під свій бренд, а також перевірте поведінку на мобільних пристроях. Для стабільної UX-якості додайте режим зниженого руху й тестуйте компонент у реальних сценаріях використання.