Long-Press Confirm with Radial Fill — Free Circular Hold Button

This is the same "deliberate gesture beats an interrupting dialog" idea behind hold to confirm, rebuilt around a circular progress ring instead of a linear bar. Holding the button traces an SVG ring closed around it; letting go early resets the ring instead of confirming. It's the shape you see around a countdown avatar, a wearable's unlock gesture, or a camera shutter hold, and it reads as more deliberate than a bar because the "target" — a fully closed circle — is visually obvious from the first frame.

A stroke-dashoffset ring, not a CSS animation

The ring is a single <circle> given stroke-dasharray equal to its own circumference (2 π r) and a stroke-dashoffset that starts equal to that same value, which hides the entire stroke. Every animation frame recomputes progress = elapsed / HOLD_MS from performance.now() and sets strokeDashoffset = CIRCUMFERENCE * (1 - progress), so the visible arc length is always an exact, real-time reflection of how long the pointer has been down — not a canned CSS @keyframes sweep that runs for a fixed duration no matter what the user does.

Radial vs. linear: why the mechanic changes the feel

A linear bar fills left-to-right and communicates "how much is left" the way a loading bar does. A radial ring instead frames the button itself, so the *target* — a closed loop — is spatially obvious around the exact thing you're pressing, and the gesture reads more like "close the circle" than "wait for a bar." Because the ring is drawn with stroke-linecap: round and rotated -90deg so it starts at 12 o'clock, the sweep looks like a clock hand completing a lap, which is a distinct visual grammar from a progress bar.

Real elapsed-time math, not decoration

Exactly like a linear hold button, releasing early doesn't just stop an animation — cancel() reads whatever strokeDashoffset the ring is currently at and eases it back to the closed (empty) state with a short transition, so a hold released at 40% visibly retracts from 40%, never snapping or lying about how far you got. The transition is re-enabled only for that retract, keeping the fill-up itself frame-accurate.

Pointer capture keeps the hold honest

setPointerCapture on pointerdown means the button keeps receiving pointerup even if a finger drifts slightly off the small circular hit area during the hold — important since a round button has a smaller forgiving hit region than a wide bar. touch-action: none stops the page from scrolling underneath the gesture.

Customizing it

Swap the icon inside the ring, change HOLD_MS, recolor the completed state, or make the ring a full 360° gauge with tick marks for a "charge meter" feel. Pair it with slide to confirm as an alternate confirm gesture, or use the same stroke-dashoffset technique to drive a radial menu trigger's own progress state.