Radar Sweep Scan Loader — Free HTML CSS JS Snippet

A radar sweep loader mimics the classic circular radar display: a bright beam continuously rotates around a center point, and contacts on the screen only flash brightly the instant the beam crosses their angular position, then fade until the next pass. This snippet builds that behavior for real — the beam rotation is a lightweight CSS animation, but each blip's paint-and-fade timing is computed every frame in JavaScript against the beam's actual current angle, so blips only ever light up in sync with the sweep passing over them rather than blinking on an unrelated independent timer.

The sweep beam is pure CSS, the blips are not

The rotating beam itself (.rs-sweep) is a conic-gradient background on a small element rotated continuously by a CSS @keyframes animation — cheap, GPU-friendly, and needs no JavaScript to animate smoothly. But a CSS animation alone has no way to know "the beam is currently crossing 214 degrees," so anything that must react to the beam's live position — the blips — has to be computed separately in JavaScript rather than as more CSS animation.

Keeping JS-computed blips in sync with a CSS-driven beam

The trick is the constant SWEEP_PERIOD = 2800, deliberately kept equal to the CSS animation's 2.8s duration. currentSweepAngle(elapsed) derives the beam's current angle purely from elapsed time modulo that period — the same period the CSS animation uses — so the JavaScript-computed angle and the CSS-rendered beam position stay synchronized without any direct communication between the two, as long as both read from the same wall-clock time and the same period constant.

Painting a blip only when the beam crosses it

Each of six randomly-placed contacts stores its own polar angle. Every animation frame, tick() compares the beam's current angle against each contact's angle using a wrapped angular-difference calculation (((sweepAngle - c.angle + 540) % 360) - 180, which correctly handles the 359-to-0 degree wraparound) — when that difference is small, the contact is freshly "painted" and its lastPainted timestamp updates. Every frame afterward, the contact's opacity and radius fade based on how long ago it was last painted, creating the signature "flash and decay" blip behavior real radar displays have.

Randomized contact placement, not a fixed pattern

Contact positions are generated once at load with random polar angle and radius (converted to Cartesian x/y via cos/sin), so the pattern of blips differs on every page load rather than always lighting up in the same six spots — appropriate for a loading indicator meant to suggest ongoing discovery rather than a static decoration.

Cycling status text

The hint text beneath the radar cycles through a short list of scanning-themed phrases once per full sweep rotation, computed from Math.floor(elapsed / SWEEP_PERIOD) % labels.length — giving the loader a sense of ongoing multi-stage work without needing any real backend progress data to drive it.