Heartbeat Pulse Monitor Loader — Free HTML CSS JS Snippet

A heartbeat monitor loader mimics a hospital ECG display: a repeating spike-shaped waveform scrolls continuously across a dark screen, with a bright leading edge sweeping left to right and a bpm readout ticking nearby. Unlike a generic pulsing dot, this snippet draws an actual shaped waveform — a flat baseline, then a small dip, a sharp upward spike, a dip below baseline, and a rounded bump, matching the real QRS-complex shape of a heartbeat trace — repeated end-to-end so it reads unmistakably as "heartbeat" rather than an arbitrary wiggle.

Building one repeatable waveform unit

beatUnit(unitWidth) constructs a single beat as an ordered array of [x, y] points: a long flat segment (most of a real heartbeat cycle is a flat baseline between beats), followed by a small Q dip, a sharp R peak, an S dip below the baseline, and a rounded T wave, then a short flat tail padding the unit back out to its full width. This exact five-part shape — flat, small-dip, sharp-spike, dip, rounded-bump, flat — is what a real single-lead ECG trace looks like, and repeating this one unit via pathFromUnits(count, xOffset) is what produces a continuous, recognizably medical waveform instead of a looping sine wave.

Seamless infinite scroll with two trace layers

A dim, low-opacity trace (.hb-trace-dim) renders the full repeating waveform shape at rest across the whole visible width, giving the eye context for the shape even in the portion that hasn't "played" yet. A brighter, glowing live trace is layered on top but clipped with an SVG <clipPath> rect whose width grows with elapsed time — so the bright trace only ever shows up to the current sweep position, exactly like a real monitor where the newest sample is drawn and the sweep continues past what's already been shown. Both traces scroll using the same scrollX = (elapsed * pxPerMs) % UNIT_W calculation, so the waveform never visibly jumps or resets even though it loops indefinitely.

Deriving pixel speed from a real BPM value

Rather than an arbitrary animation duration, pxPerMs is derived directly from BPM: msPerBeat = 60000 / BPM, then pxPerMs = UNIT_W / msPerBeat. This means the waveform's visual scroll speed is mathematically tied to the displayed beats-per-minute number — changing BPM changes both the readout and the actual scroll speed together, keeping them honest with each other rather than being two independently-set values that happen to look plausible together.

A scan head that tracks the current waveform height

The small bright dot (scanHead) doesn't just travel in a straight horizontal line — its cy is set every frame by finding the nearest point in the unit array to the current sweep position within its cycle, so the dot visually rides along the top of the spike as it passes through, rising sharply during the R peak and dipping during the S trough, reinforcing that it's the leading edge actively drawing the trace rather than a decoration moving independently of it.

Subtle liveness details

The bpm readout jitters by a small random amount every 1.4 seconds and the status text below the monitor cycles through a short list of connection-themed phrases — small touches that keep a loading state that could run for many seconds from reading as visually frozen or fake.