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.

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.

UiShapeLoading props

Prop	Type	Default	Description
`title` / `subtitle`	`string \| null`	—	Text.
`customClass`	`string \| string[] \| null`	—	Extra classes.

For a bare inline spinner, use UiProgressSpinner.

Edit this pageorReport an issue

List

Display grouped items with UiListGroup and UiListItem.

Modal

Show dialogs and confirmations with UiModal and UiConfirmModal.