Feedback · community component

Radar Ping Live Alert Widget

Real-time telemetry status badge with continuous radar sweep circle.

CSSMIT licenseUpdated today

◉ 100 views

Live 1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="radar-alert"><div class="radar-scope"><div class="radar-sweep"></div></div><span>SYSTEM ONLINE</span></div>

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="radar-alert"><div class="radar-scope"><div class="radar-sweep"></div></div><span>SYSTEM ONLINE</span></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.radar-alert { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; background: #09090b; border: 1px solid #27272a; border-radius: 20px; font-family: monospace; font-size: 10px; color: #10b981; }
.radar-scope { position: relative; width: 14px; height: 14px; border: 1px solid #10b981; border-radius: 50%; overflow: hidden; }
.radar-sweep { position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 70%, rgba(16,185,129,0.8)); animation: radarSpin 1.5s linear infinite; }
@keyframes radarSpin { 100% { transform: rotate(360deg); } }

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.radar-alert { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; background: #09090b; border: 1px solid #27272a; border-radius: 20px; font-family: monospace; font-size: 10px; color: #10b981; }
.radar-scope { position: relative; width: 14px; height: 14px; border: 1px solid #10b981; border-radius: 50%; overflow: hidden; }
.radar-sweep { position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 70%, rgba(16,185,129,0.8)); animation: radarSpin 1.5s linear infinite; }
@keyframes radarSpin { 100% { transform: rotate(360deg); } }

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryFeedback

AccessibilityKeyboard ready

Explore similar parts →

Created by

codepeek

@codepeek

Open-source licenseMIT

Use, copy, modify, publish, distribute and sell this UI element in personal or commercial work.

Keep the original copyright and MIT notice in substantial copies. Provided “as is”, without warranty.

Read the MIT license

Used tags

#buttons #css #interface #opensource #codepeek

Community

Comments 0

One main comment per member. Conversations can have unlimited replies.