Components
Loading
Indicate loading with spinner, expressive, and shape loaders.
Three loading components for different moods: UiLoading (spinner), UiExpressiveLoading (animated, cycling messages), and UiShapeLoading (animated shapes).
Spinner loading
<template>
<UiLoading title="Loading" subtitle="Fetching your data…" spinner-size="48px" />
</template>
Expressive loading
Cycles through messages on an interval:
<template>
<UiExpressiveLoading
:title="['Warming up…', 'Almost there…', 'Finishing up…']"
:interval="2500"
size="lg"
/>
</template>
Shape loading
<template>
<UiShapeLoading title="Generating" subtitle="This may take a moment" />
</template>
UiLoading props
| Prop | Type | Default | Description |
|---|---|---|---|
title / subtitle | string | null | — | Text. |
spinnerSize | string | number | '65px' | Spinner size. |
hideSpinner | boolean | false | Hide the spinner. |
customClass | string | string[] | null | — | Extra classes. |
loadingStyles | StyleValue | — | Inline styles for the root element. |
role | string | 'status' | ARIA role. |
ariaLabel | string | 'Loading' | Accessible name. |
ariaLive | 'off' | 'polite' | 'assertive' | 'polite' | Live-region politeness. |
UiExpressiveLoading props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | string[] | null | — | Message, or list of messages to cycle. |
interval | number | 3000 | Cycle interval (ms). |
size | 'sm' | 'md' | 'lg' | 'md' | Size. |
customClass | string | string[] | null | — | Extra classes. |
loadingStyles | StyleValue | — | Inline styles for the root element. |
role | string | 'status' | ARIA role. |
ariaLabel | string | 'Loading content' | Accessible name. |
ariaLive | 'off' | 'polite' | 'assertive' | 'polite' | Live-region politeness. |
UiShapeLoading props
| Prop | Type | Default | Description |
|---|---|---|---|
title / subtitle | string | null | — | Text. |
customClass | string | string[] | null | — | Extra classes. |
loadingStyles | StyleValue | — | Inline styles for the root element. |
role | string | 'status' | ARIA role. |
ariaLabel | string | 'Loading content' | Accessible name. |
ariaLive | 'off' | 'polite' | 'assertive' | 'polite' | Live-region politeness. |
For a bare inline spinner, use
UiProgressSpinner.