Loader

A text-based loading indicator. The label is the loader, animated.

Anatomy

variant controls how the text itself moves, and dots toggles the trailing animated dots. Both are independent, so you can pick one or combine them.

TSX


API


Reference for each part of the component, including its available props and behavior.


Loader


Self-contained inline status. Renders as a span by default, sets role="status", and uses the text as aria-label. Pass render to swap the element, for example dropping the loader straight into a button:


TSX


Animation pieces:


    

  • variant="pulse": the whole word fades in and out together. Calm, no direction.
    • 

  • variant="shimmer": a brighter band sweeps left across the text via a gradient mask. Directional.
    • 

  • dots: three dots fade in after the text in sequence. Stack with any variant.
    • 



Prop