Aller au contenu

Composants · Référence

Loading

A compact loading indicator with a spinner and accessible label text.

Dernière mise à jour le 28 septembre 2026

Overview

Loading renders a small spinner next to localized loading text. Use it inside pending pages, empty table states, cards, and inline loading regions. It defaults to the inline variant. Pass variant="centered" for route-level pending states and label to override the built-in English and French default.

Set the active locale once with KrakstackProvider; pass locale directly only when a component needs an override. Message overrides are keyed by arbitrary locale strings, so additional languages can be supplied with messages={{ es: { ... } }}. Exact locale keys such as es-MX take precedence over base keys such as es; English is the final fallback.

Install

shell
bunx shadcn@latest add @krak-stack/loading

Usage

tsx
import { Loading } from "@/components/ui/loading";

<Loading />
<Loading variant="centered" />
<Loading label="Refreshing records..." />
Dependencies
Packages and shadcn components required by this registry item.

Dependencies

Registry Dependencies

Preview

Loading
A reusable spinner and label for pending pages, tables, and inline regions.
Chargement...

Inline loading state

Refreshing records...