Feedback@knitui/components
LoadingOverlay
LoadingOverlay covers its parent container with a centered Loader over a translucent scrim. It composes Overlay + Loader and renders null when visible is false. The loader accent follows the active theme prop; scrim background and opacity are configurable via overlayProps.
import { LoadingOverlay } from "@knitui/components";Playground
Loading playground…
<LoadingOverlay
visible
zIndex={400}
/>Examples
Hidden
Demonstrates the default hidden state — nothing is rendered when visible is false.
Loading example…
Controlled
Controlled toggle — use the button to show and hide the overlay.
Loading example…
Loader Types
All three loader types — oval (spinning ring), dots, and bars — side by side.
Loading example…
Loader Sizes
The full loader size scale swept across a fixed container.
Loading example…
Shadows
The inherited shadow elevation prop, from xs to xl.
Loading example…
Dark Scrim
Custom scrim — dark background at higher opacity to show how overlayProps affect the wash.
Loading example…
Blurred Scrim
Blurred scrim — applies a backdrop blur for a frosted-glass effect (web only).
Loading example…
Styles
Per-slot styles targets individual parts — here the overlay scrim and the loader.
Loading example…
Themed
Themed loader — the loader accent follows the active theme color ramp.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
backgroundColor | OpaqueColorValue | GetThemeValueForKey<"backgroundColor"> | undefined | "#000" | Scrim base background (a literal wash color, not a theme accent). |
backgroundOpacity | number | undefined | 0.6 | Scrim `background-color` opacity 0–1, ignored when `gradient` is set. |
blur | string | number | undefined | 0 | Web-only background blur in px (`backdrop-filter`); no-op on native. |
disabled system | boolean | undefined | — | — |
fixed | boolean | undefined | false | Switch from `absolute` (parent-relative) to `fixed` (viewport-relative). |
gradient system | string | undefined | — | Web-only CSS gradient; when set, `backgroundColor`/`backgroundOpacity` are ignored. |
loaderProps | LoadingOverlayLoaderStyle | undefined | — | — |
overlayProps | LoadingOverlayOverlayStyle | undefined | — | — |
radius system | string | number | undefined | — | — |
shadow system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | — |
styles system | SlotStyles<LoadingOverlayStyles> | undefined | — | Per-slot style sugar — props spread onto the matching styled part. |
theme system | ThemeName | null | undefined | — | Applies a theme to this element |
visible | boolean | undefined | false | Mount the overlay when true; renders nothing when false. |
Style slots
Every part of LoadingOverlay can be styled through the styles prop. Explicit props on the component always win over slot styles.
| Slot | Targets |
|---|---|
loader | Props spread onto the centered Loader (under the deprecated loaderProps). |
overlay | Props spread onto the Overlay scrim (under the deprecated overlayProps). |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiElement> | undefined |
Plus 498 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.