Loader

A visual indicator for loading states, with border and growing spinners and an animated bar loader.

Default

The default loader is a circular border spinner.

tsx

import { Loader } from "@hummingbirdui/react";

export default function LoaderDefault() {
  return <Loader className="mx-auto" />;
}

Colors

Use the color prop to change the loader's color.

tsx

import { Loader } from "@hummingbirdui/react";

const colors = [
  "primary",
  "secondary",
  "success",
  "danger",
  "warning",
  "info",
  "neutral",
] as const;

export default function LoaderColors() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      {colors.map((color) => (
        <Loader key={color} color={color} label={`Loading (${color})`} />
      ))}
    </div>
  );
}

Growing spinner

variant="grow" renders a pulsing indicator that grows and fades.

tsx

import { Loader } from "@hummingbirdui/react";

const colors = [
  "primary",
  "secondary",
  "success",
  "danger",
  "warning",
  "info",
  "neutral",
] as const;

export default function LoaderGrow() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      {colors.map((color) => (
        <Loader
          key={color}
          variant="grow"
          color={color}
          label={`Loading (${color})`}
        />
      ))}
    </div>
  );
}

Sizes

size="sm" renders a small spinner; any other dimension is set with a size utility.

tsx

import { Loader } from "@hummingbirdui/react";

export default function LoaderSizes() {
  return (
    <div className="flex items-center justify-center gap-3">
      <Loader size="sm" />
      <Loader />
      <Loader className="size-12" />
    </div>
  );
}

Bar loader

variant="bar" renders a horizontal indeterminate loading bar. The color prop switches the bar's color scheme.

tsx

import { Loader } from "@hummingbirdui/react";

const colors = [
  "primary",
  "secondary",
  "warning",
  "danger",
  "info",
  "success",
] as const;

export default function LoaderBar() {
  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-3">
      {colors.map((color) => (
        <Loader
          key={color}
          variant="bar"
          color={color}
          label={`Loading (${color})`}
        />
      ))}
    </div>
  );
}

Buttons

Loaders can be placed inside buttons to indicate a loading state.

tsx

import { Button, Loader } from "@hummingbirdui/react";

export default function LoaderButtons() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <Button shape="square" disabled aria-label="Loading">
        <Loader size="sm" label="" aria-hidden="true" />
      </Button>
      <Button disabled>
        <Loader size="sm" label="" aria-hidden="true" />
        Loading...
      </Button>
      <Button shape="square" disabled aria-label="Loading">
        <Loader variant="grow" size="sm" label="" aria-hidden="true" />
      </Button>
      <Button disabled>
        <Loader variant="grow" size="sm" label="" aria-hidden="true" />
        Loading...
      </Button>
    </div>
  );
}

API Reference

Loader

Prop	Type	Default
`variant`	`enum`	`"border"`
`color`	`enum`	—
`size`	`enum`	`"md"`
`label`	`string`	`"Loading..."`
`asChild`	`boolean`	`false`
`className`	`string`	—

Styling

Hummingbird React loader is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available loader classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousList Group NextNav