Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Loader

An accessible loading indicator with arcs, dots, expanding rings, and an indeterminate bar.

CoreBasics@gaudi/design-system/core/LoaderView in StorybookSource

Loader replaces the former Spinner component and story.

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Loader } from '@gaudi/design-system/core/Loader';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/loader-inline-controls.json.

Usage

import { Loader } from '@gaudi/design-system/core/Loader';
<Loader variant='three-dots' size='md' label='Loading articles' />

Playground

Loader props
Props
default arc
default md
default Loading
Loader.jsx
import { Loader } from '@gaudi/design-system/core/Loader';
<Loader />

Examples

In buttons, badges and inputs

Storybook

Inline status

Storybook

Overlays and empty states

Storybook

API

6 props

Accessibility

Each loader exposes role="status" and a readable label. Motion is decorative to that status. With reduced motion, rotation, travel, scaling and bouncing stop; the whole indicator breathes slowly in place. For an already-labelled button or busy region, use aria-hidden="true" to avoid duplicate announcements.

Notes

  • Use className="text-current" to inherit surrounding text, or a semantic tone such as text-text-muted. Explicit size utility classes can override the dimensions. Keep the bar at its natural 3:1 ratio.
  • All animation is CSS and SVG; there are no timers or browser-only rendering dependencies. Unmount the loader when the operation finishes. Loading state, cancellation, progress and recovery belong to the host.
  • Import Loader from the root, core, or core/Loader entry. Spinner, SpinnerRoot and core/Spinner have been renamed to Loader, LoaderRoot and core/Loader; update existing imports.
  • The Shadix UI loader reference informed the variant family. Geometry and motion are implemented locally using Gaudi colors, density and motion conventions.
ProgressDeterminate and indeterminate progress with a readable task label.4 examplesEmptyStateExplain empty collections, unavailable results and the next useful action.4 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesInputText, search, numeric and date inputs with prefix and suffix slots.11 examplesPillPill renders compact category and status labels.4 examplesChatActivityIndicatorWhat the assistant is doing: idle, thinking, streaming, tool, done or error.