ns-ui
An indeterminate loader for long background work — a row of pendulums with slightly different periods drift from unison into apparent chaos and back into perfect sync on a knowable ~10s cycle, pure CSS with zero per-frame JS.
Use when a wait long enough that the user will look away and come back (builds, indexing, bulk imports) where the loader needs a knowable long arc, the pendulum row drifting out of unison and returning to perfect sync every ~10s instead of a 1s loop that erases how long they have already waited; pick loader-iris or loader-spring-bars instead for a short inline wait where a 9-to-15-element row will not fit, and loader-thread-spool when a byte total will arrive and the indicator should convert into a real gauge.
Install
npx shadcn add https://design.helpmarq.comns-ui / loader-pendulum-sync
Indexing, 0 seconds elapsed
Building, 0 seconds elapsed
sync → chaos → sync every 10s — the realignment is a heartbeat, never the finish; done retracts the row and announces explicitly
| Prop | Type | Default | Description |
|---|---|---|---|
| label? | string | — | Text prefix for the status label, e.g. "Building" / "Indexing". |
| doneLabel? | string | — | Label shown (and announced) once `done` is true. |
| value? | number | — | Controlled 0-100 progress. Omit for pure ambient indeterminate mode. |
| done? | boolean | — | Explicit completion. Structural (pendulums retract) — never inferred from a sync moment. |
| periodMs? | number | — | Full sync-chaos-sync cycle length, ms. |
| count? | number | — | Pendulum count, clamped to 9-15. |
| amplitudeDeg? | number | — | Half-angle of swing, degrees. |
| className? | string | — | — |