LoadingOverlay
A loading indicator that fills it's parent.
Props#
LoadingOverlay#
| Prop | Type | Default | Description |
|---|---|---|---|
| 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 | |
| isLoading | boolean | true | Show or hide the LoadingOverlay. |
| motionPreset | "none" | "fade" | fade | The transition that should be used for the overlay |
| size | string | The size of the LoadingOverlay | |
| spacing | ResponsiveValue<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" | fill | The variant of the LoadingOverlay |
LoadingSpinner#
Supports all Spinner options
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | The color of the spinner | |
| emptyColor | string | transparent | The color of the empty area in the spinner |
| label | string | Loading... | For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers. |
| speed | string | 0.45s | The speed of the spinner. |
| thickness | string | 2px | The thickness of the spinner |
LoadingText#
LoadingText composes a Text component.
Was this helpful?