CSS-Zone

Радарний промінь

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

Превʼю

HTML + CSS

<div class="radar">
  <div class="radar__circle radar__circle_outer"></div>
  <div class="radar__circle radar__circle_inner"></div>
  <div class="radar__beam"></div>
</div>

<style>
.radar {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.14), #0b1120);
  border: 1px solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.radar__circle {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.radar__circle_inner {
  inset: 30%;
}

.radar__beam {
  position: absolute;
  inset: -10%;
  background: conic-gradient(from 90deg, rgba(59, 130, 246, 0.24), transparent 60%);
  animation: radarSpin 3s linear infinite;
}

@keyframes radarSpin {
  to {
    transform: rotate(360deg);
  }
}
</style>

Що показує анімація Радарний промінь

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

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

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

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

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