ns-ui / loader-spring-bars
Transcribing audio
Transcribing audio…
Loadinginline, at 18px
one shared spring pulse, staggered per lath — a wave, not five bars animating alone
ns-ui
An ambient loading glyph shaped as a row of leaf springs on a rail — one displacement keyframe, staggered per bar by negative animation-delay, reads as a single pulse of energy travelling down the rack rather than bars animating in isolation.
Use when an indeterminate wait in a horizontal slot wider than it is tall (a caption row, a toolbar, the strip under a search field) where a square glyph would waste the space, since 3 to 9 bars share one keyframe phased by negative delay so a single pulse travels the rack; pick loader-iris or loader-die-tumble instead when the slot is square and inline, or loader-pendulum-sync when the row can be much wider and the wait runs into minutes.
Install
npx shadcn add https://design.helpmarq.comns-ui / loader-spring-bars
Transcribing audio…
one shared spring pulse, staggered per lath — a wave, not five bars animating alone
| Prop | Type | Default | Description |
|---|---|---|---|
| count? | number | — | number of laths, clamped 3-9 |
| height? | number | — | rack height in px |
| periodMs? | number | — | ms for one full pulse to sweep across the rack and repeat |
| label? | string | — | text announced via the component's own aria-live region |
| className? | string | — | — |