Components · Reference
Loading
A compact loading indicator with a spinner and accessible label text.
Last updated September 28, 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
bunx shadcn@latest add @krak-stack/loadingUsage
import { Loading } from "@/components/ui/loading";
<Loading />
<Loading variant="centered" />
<Loading label="Refreshing records..." />Dependencies
Registry Dependencies
Preview
Inline loading state