ns-ui

Loader Iris

An ambient loading glyph shaped as a six-blade camera-iris diaphragm breathing open and shut inside a fixed housing ring — one wedge shape repeated by rotation, its shared displacement keyframe overshooting each open and close before settling on a spring.

Use when an inline indeterminate spinner in a fixed circular footprint (a button, a field, a table cell) where the wait has no known duration and the glyph must not imply beats or steps; pick loader-die-tumble instead when four discrete legible landings per cycle better convey that work is still ticking over item by item, loader-spring-bars when the slot is a wide short strip rather than a square, or loader-thread-spool when a total will arrive mid-wait and the same object should become a real gauge.

Install

npx shadcn add https://design.helpmarq.com/r/loader-iris.json
  • loader
  • loading
  • spinner
  • indicator
  • svg
  • css-animation
  • physics
  • aria-live
  • icon

ns-ui / loader-iris

Rendering export

Rendering export…

Loadinginline, at 20px

six wedges, one shared shape — the hex opening is only their tips moving in unison

Props

PropTypeDefaultDescription
size?numberglyph size in px
periodMs?numberms for one full open-close breath
label?stringtext announced via the component's own aria-live region
className?string