Frontend - UI - LoadingScreen
Often you'll want to wait until you've fetched the data from the server before displaying the page, this component provides a fast and quick way to insert a loading screen while you wait for the data to be returned.
Props
Name | Data Type | Default | Description |
---|---|---|---|
ready | boolean | n/a | If the page is loaded or not |
loadingSpinnerColor | string | black | The colour of the spinner |
loadingClass | string | loading-message | The class assigned to the div that contains the loading message |
loadingMessage | string | Loading | The text to be displayed with the loading |
Slots
There are two slots, the default
slot and loading
slot.
The loading
slot is optional and contains LoadingMessage
by default.
Example
<LoadingScreen :ready="loaded" loading-message="Loading message">
<p>Content</p>
</LoadingScreen>