ns-ui / loader-spirograph-trace
Building search index
inked arc length = progress, on the full rosette
no total yet — arc-length sweep
complete — the whole curve inked
ns-ui
A determinate loader that traces a real hypotrochoid: the full closed rosette is always visible as a ghost, and progress is the fraction of that curve's arc length inked in, so 0% and 100% are both legible shapes rather than an empty ring.
Use when a determinate circular loader where the route matters as much as the reading — the whole closed spirograph rosette is on screen as a ghost at 0%, so the empty state is a shape rather than a bare ring, and the same curve carries an arc-length sweep when no total is known yet. Pick loader-iris instead for a small inline indeterminate glyph in a fixed square footprint with no percentage to show, progress-wick when the progress is a horizontal transport bar whose real cadence is bursty, and loader-thread-spool when the wait starts unknown and the object should visibly become a gauge once a total arrives.
Install
npx shadcn add https://design.helpmarq.comns-ui / loader-spirograph-trace
Building search index
inked arc length = progress, on the full rosette
no total yet — arc-length sweep
complete — the whole curve inked
| Prop | Type | Default | Description |
|---|---|---|---|
| value? | number | — | progress 0-100. Leave undefined for indeterminate (a travelling sweep). |
| size? | number | — | glyph size in px. |
| label? | string | — | accessible name for the progressbar. |
| R? | number | — | fixed radius of the spirograph ring. |
| r? | number | — | rolling radius. gcd(R, r) = 1 keeps the rosette a single closed curve. |
| d? | number | — | pen offset from the rolling circle's centre. |
| className? | string | — | — |