LoadingOverlay

A loading indicator that fills it's parent.

Props#

LoadingOverlay#

PropTypeDefaultDescription
colorScheme"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo"The visual color appearance of the component
isLoadingbooleantrueShow or hide the LoadingOverlay.
motionPreset"none" | "fade"fadeThe transition that should be used for the overlay
sizestringThe size of the LoadingOverlay
spacingResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | ... 54 more ... | "-3.5">Spacing between children
variant"fill" | "fullscreen" | "overlay"fillThe variant of the LoadingOverlay

LoadingSpinner#

Supports all Spinner options

PropTypeDefaultDescription
colorstringThe color of the spinner
emptyColorstringtransparentThe color of the empty area in the spinner
labelstringLoading...For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.
speedstring0.45sThe speed of the spinner.
thicknessstring2pxThe thickness of the spinner

LoadingText#

LoadingText composes a Text component.

Was this helpful?