Loader

An animated SVG spinner for loading states. Used internally by Button during its loading state, and available for standalone use.

Import

import { Loader } from "chunks-ui";

Basic Usage

The spinner inherits the current text color of its parent, so it always keeps contrast with the background.

<Loader />

Custom Color

Override the color via className:

<Loader className="text-primary" />
<Loader className="text-muted-foreground" />

Inline with Text

<div className="flex items-center gap-2 text-muted-foreground">
  <Loader />
  <span>Loading data...</span>
</div>

Full-Page Loading

<div className="flex h-screen items-center justify-center">
  <Loader />
</div>

Props

All other props are forwarded to the root <svg> element. The spinner uses animate-spin for rotation and is marked aria-hidden="true".