ns-ui

Progress Wick

A determinate progress bar that advances by capillary action — quick pull, slowing soak, brief dwell, next pull — with a faint wet-front runner previewing the track a few pixels ahead of the true fill, so bursty real-world progress (chunked uploads) reads as natural rather than janky.

Use when a determinate progress bar for uploads or multi-step completion where the underlying progress genuinely arrives in bursts (chunked uploads, multi-file copy) and a smooth glide would look like it's lying about its own cadence — progress-wick's draw-dwell rhythm makes bursty progress look like its native gait instead of a stutter, and it doubles as a slow-draw indeterminate mode for unknown-duration waits. Pick progress-narrated instead when the progress has a small number of named phases worth narrating (a build, an onboarding checklist) and a typed mono caption plus a docked timestamped ledger is the point. This is not a level/quantity gauge: pick meter-quota-meniscus instead for a soft/hard-limit quota reading, where the signal is a vessel's liquid curvature at a fixed cap, not transport along a line.

Install

npx shadcn add https://design.helpmarq.com/r/progress-wick.json
  • progress
  • loader
  • upload
  • physics
  • micro-interaction
  • accessibility

ns-ui / progress-wick

Uploading build.tar.gz
Syncing catalog

hover the panel to pause

Props

PropTypeDefaultDescription
value?numbertrue progress, 0-100 (controlled). Ignored while `indeterminate` is set.
indeterminate?booleanunknown-duration mode: the wet front alone travels the track in slow draws, no fill
label?stringvisible + accessible label, e.g. "Uploading assets.zip" (default "Progress")
announceMilestones?booleanannounce 25/50/75/100% crossings via a polite live region (default true)
className?string