Basic Components
Loading State
The loading state component provides an elegant loading overlay to indicate loading status of a page or area.
Usage Examples
Default Usage
The most basic usage, displaying the default loading text.
300px
Custom Text
Use the text property to customize the loading status text content.
300px
Timeout Indicator
When loading takes longer than the specified seconds, a timeout message is displayed to inform users.
300px
Custom Timeout Message
Use the timeoutText parameter to customize the timeout message displayed when loading takes longer than expected.
300px
Non-Fullscreen Mode
By setting the fullscreen parameter to false, the loading state only covers its container area, not the entire screen.
300px
Properties
| Property | Basic component module for translation keys shared across all component documentation pages | Type | Default |
|---|---|---|---|
| text | Text displayed during loading, uses default text if not specified | string | null |
| timeoutSeconds | Seconds after which to show a timeout message, set to 0 for no timeout | number | 30 |
| timeoutText | Text displayed in the timeout message, uses default text if not specified | string | null |
| fullscreen | Whether to display loading status in fullscreen mode, true for fullscreen, false to display only within the parent container | boolean | true |
Design Empowers, Innovation Unlimited