Radar Progress

Stable

Concentric targeting radar scopes featuring continuous 360-degree sweep beams, concentric range rings, and hairline reticle crosshairs.

Installation

$pnpm add @siberui/react

Import

tsx

import { RadarProgress } from '@siberui/react';

Basic Usage & Reticle Crosshairs

RadarProgress displays concentric distance rings, crosshairs, and a sweeping gradient radar cone.

tsx

<div className="flex items-center justify-center p-8">
  <RadarProgress size="md" color="cyan" />
</div>

Signal Spectrum (Cyan, Green, Rose)

Switch between tactical cyan, biological sonar green, and hostile incursion rose.

TACTICAL SCAN (CYAN)

SONAR SWEEP (GREEN)

THREAT LOCK (ROSE)

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
  <div className="flex flex-col items-center gap-4 p-6 rounded-xl bg-white/[0.02] border border-white/[0.06]">
    <RadarProgress size="md" color="cyan" />
    <span className="text-xs font-mono text-cyan-400">TACTICAL SCAN (CYAN)</span>
  </div>

  <div className="flex flex-col items-center gap-4 p-6 rounded-xl bg-white/[0.02] border border-white/[0.06]">
    <RadarProgress size="md" color="green" />
    <span className="text-xs font-mono text-emerald-400">SONAR SWEEP (GREEN)</span>
  </div>

  <div className="flex flex-col items-center gap-4 p-6 rounded-xl bg-white/[0.02] border border-white/[0.06]">
    <RadarProgress size="md" color="rose" />
    <span className="text-xs font-mono text-rose-400">THREAT LOCK (ROSE)</span>
  </div>
</div>

Scale & Scope Dimensions (sm, md, lg)

Scale dimensions across sm (64px), md (128px), and lg (192px).

SM (64px)

MD (128px)

LG (192px)

tsx

<div className="flex items-center justify-center gap-8">
  <RadarProgress size="sm" color="cyan" />
  <RadarProgress size="md" color="cyan" />
  <RadarProgress size="lg" color="cyan" />
</div>

Scanning Sweep Toggle

Control the animated sweep cone using the scanning boolean prop.

tsx

<div className="flex flex-col items-center gap-6">
  <RadarProgress size="md" color="cyan" scanning={isScanning} />
  <Button variant="secondary" size="sm" onClick={() => setIsScanning(!isScanning)}>
    {isScanning ? 'Pause Radar Sweep' : 'Resume Radar Sweep'}
  </Button>
</div>

Frosted Cyber-Glass Long-Range Orbital Radar

Embed radar scopes inside frosted glass cards with circuit backdrop textures and perimeter beam sweeps.

ORBITAL INTERCEPT RADAR

TRACKING

2 OBJECTS IN PROXIMITY

Telemetry lock active on Sector 09-Beta

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden flex flex-col items-center">
  <div className="relative z-10 space-y-6 flex flex-col items-center w-full">
    <div className="flex items-center justify-between w-full pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Satellite className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">ORBITAL INTERCEPT RADAR</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">TRACKING</Badge>
    </div>

    <RadarProgress size="lg" color="cyan" />

    <div className="w-full text-center space-y-1">
      <span className="text-xs font-mono text-cyan-300">2 OBJECTS IN PROXIMITY</span>
      <p className="text-[11px] text-slate-400 font-mono">Telemetry lock active on Sector 09-Beta</p>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Target Acquisition Display

Composite mission defense card with embedded radar reticles.

SECTOR RADAR SCOPE

ACTIVE

Realtime positional sonar for aerospace defense grid.

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">SECTOR RADAR SCOPE</CardTitle>
      <Badge variant="neon" size="sm">ACTIVE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Realtime positional sonar for aerospace defense grid.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 flex flex-col items-center gap-6">
    <RadarProgress size="md" color="green" />

    <div className="flex w-full justify-between gap-3 pt-2">
      <Button variant="secondary" size="sm" className="w-1/2">CALIBRATE</Button>
      <Button variant="neon" size="sm" glow className="w-1/2">LOCK TARGET</Button>
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (3)← swipe to inspect →

Property	Description	Type	Default
color	Radar scope color and glowing focal point tone.	"cyan" \| "green" \| "rose"	"cyan"
size	Diameter dimensions of the circular radar reticle.	"sm" \| "md" \| "lg"	"md"
scanning	Toggles the 360-degree rotational conic gradient sweep animation.	boolean	true

Accessibility

Decorative Visualizer: RadarProgress is a visual telemetry decoration. Pair it with clear live text statistics for screen reader users.

Best Practices

Visual Balance: When embedding radar scopes inside dashboards, keep surrounding text strictly monospace to preserve the cybernetic aesthetic.