components

Loader

Loaders indicate that content or data is being fetched or processed. They provide visual feedback to the user that the application is working and a result is expected. Available in multiple sizes and an inverse variant for dark backgrounds.

Import
import { Loader } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

  • +Indicate an indeterminate loading state.
  • +When the content layout is unknown before data arrives.
  • +As a full-page or section-level loading indicator.

When not to use

  • −When the content layout is predictable — use Skeleton.
  • −For button-level loading — use the Button loading prop.
  • −For instant operations.

Examples

Code Samples

Default

A medium-sized loading spinner in the default style.

import { Loader } from "@skedulo/breeze-ui-react";

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

Sizes

Loaders are available in small ("sm"), medium ("md"), and large ("lg") sizes.

import { Loader } from "@skedulo/breeze-ui-react";

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

Inverse Variant

The inverse variant is designed for use on dark backgrounds to maintain visual contrast.

import { Loader } from "@skedulo/breeze-ui-react";

export default function InverseLoader() {
  return (
    <div className="bg-gray-800 rounded-lg p-6 flex gap-6 items-center">
      <Loader size="sm" variant="inverse" />
      <Loader size="md" variant="inverse" />
      <Loader size="lg" variant="inverse" />
    </div>
  );
}

With Custom Aria Label

A loader with a custom ariaLabel for improved accessibility, describing what is being loaded.

import { Loader } from "@skedulo/breeze-ui-react";

export default function AccessibleLoader() {
  return <Loader size="md" ariaLabel="Loading data..." />;
}

Guidelines

Do

  • ✓Center the loader in the loading area.
  • ✓Use appropriate size for the context (inline vs page).

Don't

  • ✗Don't show a loader without eventually resolving.
  • ✗Don't use multiple loaders simultaneously.

API Reference

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Controls the size of the loading spinner. Use "sm" for inline indicators, "md" for standard loading states, and "lg" for full-page or prominent loading areas.
variant"default" | "inverse""default"The visual variant of the loader. Use inverse on dark backgrounds for proper contrast.
ariaLabelstring—Custom accessible label for the loader. Useful for screen readers to describe what is loading.

Related Components

SkeletonButton