All componentsoverlayfill
Loading Overlay
Busy states that fill a container, cover it, or take over the screen while content loads.
Loading projects…
Variants
Loading projects…
Loading projects…
fullscreen
Install
zsh — loading-overlay
1bunx stylexblocks add loading-overlayUsage — Ark UI
loading-overlay.tsx
1234567891011121314import { LoadingOverlay } from "#components/ui/ark-ui/loading-overlay.tsx";import { Spinner } from "#components/ui/ark-ui/spinner.tsx";
export function Example() { return ( // variant="overlay" covers the nearest positioned ancestor; // "fill" fills a flex parent; "fullscreen" fixes over the viewport. // Parts compose via asChild. <LoadingOverlay.Root variant="overlay" role="status"> <Spinner size="lg" /> <LoadingOverlay.Text>Loading projects…</LoadingOverlay.Text> </LoadingOverlay.Root> );}