Loader

TS

import { … } from "@fungi.computer/caps/components/loader";

Hero

TSX

import { Loader } from "@fungi.computer/caps/components/loader";

export default function Hero() {
  return <Loader variant="bloom" size="lg" label="Spawning" />;
}

Variants

TSX

import {
  Loader,
  type LoaderVariant,
} from "@fungi.computer/caps/components/loader";

const variants: readonly LoaderVariant[] = [
  "line",
  "wander",
  "square",
  "donut",
  "bloom",
];

export default function Variants() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      {variants.map((variant) => (
        <Loader key={variant} variant={variant} label={variant} />
      ))}
    </div>
  );
}

Sizes and tones

TSX

import { Loader } from "@fungi.computer/caps/components/loader";

export default function SizesAndTones() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Loader size="sm" tone="neutral" label="Loading" />
      <Loader size="md" tone="primary" label="Loading" />
      <Loader size="lg" tone="accent" label="Loading" />
      <Loader size="md" tone="success" label="Loading" />
    </div>
  );
}

Props

LoaderProps

Prop	Type	Description
decorative?	boolean
label?	ReactNode
size?	"sm" | "md" | "lg" | "fill"	fill grows the formation to its container, as a full-tile placeholder.
variant?	"line" | "wander" | "square" | "donut" | "bloom"
tone?	"neutral" | "accent" | "primary" | "success"

• decorative?boolean
• label?ReactNode
• size?"sm" | "md" | "lg" | "fill"

  fill grows the formation to its container, as a full-tile placeholder.

• variant?"line" | "wander" | "square" | "donut" | "bloom"
• tone?"neutral" | "accent" | "primary" | "success"

Full types: API reference.