LoadingOverlay

Wraps content and covers it with a spinner while loading.

Jump to API reference

Import

Vue
import { UiLoadingOverlay } from '@ziyarago/ui/vue'

Loading

Madinah Grand Hotel, 5 nights, 2 guests. Free cancellation until 7 days before arrival.
Checking availability
Vue
<UiLoadingOverlay loading label="Checking availability">
  Madinah Grand Hotel, 5 nights, 2 guests. Free cancellation until 7 days before arrival.
</UiLoadingOverlay>

Idle

Madinah Grand Hotel, 5 nights, 2 guests. Free cancellation until 7 days before arrival.
Vue
<UiLoadingOverlay :loading="false">
  Madinah Grand Hotel, 5 nights, 2 guests. Free cancellation until 7 days before arrival.
</UiLoadingOverlay>

API reference

Wrapper that dims its content and shows a spinner on top while loading; use over cards, tables or forms during a refresh.

Props

PropType and valuesDefaultDescription
loadingbooleanfalseShows the overlay with the spinner.
labelstring—Text shown under the spinner.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultContent covered by the overlay.