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-text" />
<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

Cover the page with a fixed overlay while something loads. The demo hides it after two seconds:

<div role="status">
  {loading && (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <Loader className="text-white" />
      <span className="sr-only">Loading…</span>
    </div>
  )}
</div>

Keep the role="status" element mounted and change only its content. Screen readers often skip a status region that mounts together with its text.

Props

This component accepts all props from the underlying <svg> element. The spinner uses animate-spin for rotation and is marked aria-hidden="true", so pair it with text or a role="status" region that says what is loading. It keeps spinning when the user prefers reduced motion, because it is an essential status indicator.