progress_activity

Loader

Progress indicator for async operations.

Loader Examples

Copy-ready examples with live previews.

Basic usage

Simple CSS-driven loading indicator.

Live preview

import Loader from "@/_components/loader/Loader";

export default function Example() {
  return <Loader />;
}

Variants

All semantic variants supported by the component.

Live preview

Visual style comes from variant. This grid renders the full variant set.

variant="primary"

variant="secondary"

variant="success"

variant="warning"

variant="danger"

variant="info"

import Loader from "@/_components/loader/Loader";

export default function Example() {
  return (
    <>
      <Loader variant="primary" />
      <Loader variant="secondary" />
      <Loader variant="success" />
      <Loader variant="warning" />
      <Loader variant="danger" />
      <Loader variant="info" />
    </>
  );
}

Sizes

Small / medium / large sizing presets.

Live preview

Size presets: small / medium / large.

size="small"

size="medium"

size="large"

import Loader from "@/_components/loader/Loader";

export default function Example() {
  return (
    <>
      <Loader size="small" />
      <Loader size="medium" />
      <Loader size="large" />
    </>
  );
}

Animation speed

Slow / medium / fast / ultra presets.

Live preview

Animation presets: slow / medium / fast / ultra.

animationSpeed="slow"

animationSpeed="medium"

animationSpeed="fast"

animationSpeed="ultra"

import Loader from "@/_components/loader/Loader";

export default function Example() {
  return (
    <>
      <Loader animationSpeed="slow" />
      <Loader animationSpeed="medium" />
      <Loader animationSpeed="fast" />
      <Loader animationSpeed="ultra" />
    </>
  );
}

Inline usage

Use it inline with text and inside buttons.

Live preview

Loader renders a <span>, so you can place it inline or inside buttons.

Fetching data

import Loader from "@/_components/loader/Loader";
import { Button } from "@/_components/buttons_variants/buttons/Button";

export default function Example() {
  return (
    <>
      <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
        <span>Fetching data</span>
        <Loader variant="primary" size="small" animationSpeed="medium" />
      </div>

      <Button variant="primary">
        Saving
        <span style={{ display: "inline-flex", marginLeft: 10 }}>
          <Loader variant="secondary" size="small" animationSpeed="fast" />
        </span>
      </Button>
    </>
  );
}

Variant × size matrix

Quick visual check across all combinations (speed = medium).

Live preview

Quick visual matrix: rows = variant, columns = size (speed: medium).

variant \ size	small	medium	large
primary
secondary
success
warning
danger
info

import Loader from "@/_components/loader/Loader";

export default function Example() {
  return (
    <Loader variant="primary" size="medium" animationSpeed="medium" />
  );
}

Interactive playground

Quick way to validate the supported combinations.

Live preview

variant

size

animationSpeed

import { useState } from "react";
import Loader from "@/_components/loader/Loader";

export default function Example() {
  const [variant, setVariant] = useState<"primary" | "secondary" | "success" | "warning" | "danger" | "info">("primary");
  const [size, setSize] = useState<"small" | "medium" | "large">("medium");
  const [animationSpeed, setAnimationSpeed] = useState<"slow" | "medium" | "fast" | "ultra">("medium");

  return (
    <Loader
      variant={variant}
      size={size}
      animationSpeed={animationSpeed}
    />
  );
}

On this page

Loader Props

Loader — Props
Prop	Type	Required	Default	Description
size	"small" \| "medium" \| "large"	No	"medium"	Controls the loader dimensions (maps to `classSizesLoader`). Use `small` for inline contexts and `large` for standalone loaders.
variant	"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "info"	No	"primary"	Controls the semantic color style (maps to `classVariantLoader`). Pick a variant that matches the UI state (success/warning/danger/info).
animationSpeed	"slow" \| "medium" \| "fast" \| "ultra"	No	"medium"	Controls the spin speed (maps to `classAnimationSpeedLoader`). `ultra` is useful for short background operations to feel responsive.