CSS-Zone
Дві пунктирні окружності обертаються у протилежні сторони. Практичний приклад для лоадерів та індикаторів стану з живим превʼю, HTML-розміткою та готовим CSS-кодом для інтеграції у продакшен.
Превʼю
HTML + CSS
<div class="ring-dash"></div> <style> .ring-dash { width:96px; height:96px; border-radius:50%; border:6px dashed #5b8def; box-shadow: 0 0 20px rgba(91, 141, 239, 0.25); animation: ring-dash-rotate 1.6s linear infinite; position:relative; } .ring-dash::after{ content:''; position:absolute; inset:16px; border-radius:50%; border:4px solid rgba(154,107,255,.65); border-right-color:transparent; animation: ring-dash-reverse 1.1s linear infinite; } @keyframes ring-dash-rotate{to{transform:rotate(360deg);}} @keyframes ring-dash-reverse{to{transform:rotate(-360deg);}} </style>
Пунктирне кільце — це готовий CSS-патерн, який можна швидко інтегрувати у веб-інтерфейс без зовнішніх бібліотек. Приклад демонструє базову структуру HTML та стилі, які легко масштабуються під реальний компонент у дизайн-системі.
Використовуйте цей ефект для підсилення візуального фокусу, індикації стану або мікровзаємодій у ключових частинах сторінки. Анімація має підтримувати зміст екрана, а не конкурувати з ним, тому важливо контролювати темп, контраст і розмір.
Скопіюйте HTML і CSS, адаптуйте змінні кольору, тривалість та easing під свій бренд, а також перевірте поведінку на мобільних пристроях. Для стабільної UX-якості додайте режим зниженого руху й тестуйте компонент у реальних сценаріях використання.