Skip to content

Loading

The Loading component allows you to display a loading state for use on a global state or a specific element.

Examples

Base

The loading state is displayed across the entire page if the full-page prop is added. Otherwise, the overlay will be aligned to the next wrapper element with style="position: relative".

Slot

Override the loading icon by passing a default slot.

Programmatically

This component provides a programmatic interface that can be accessed by the useOruga() composable.

Loading component

A simple loading overlay.

html
<o-loading></o-loading>

Props

Prop nameDescriptionTypeValuesDefault
activeWhether loading is active or not, use v-model:active to make it two-way bindingboolean-false
animationCustom animation (transition name)string-
From config:
loading: {
  animation: "fade"
}
cancelableIs Loading cancable by pressing escape or clicking outside.boolean-false
clipScrollSet true to remove the body scrollbar.
When false, a non-scrollable scrollbar will be kept to avoid moving the background,
but will set the body to a fixed position, which may break some layouts.
boolean-
From config:
loading: {
  clipScroll: false
}
fullPageLoader will overlay the full page.boolean-true
iconIcon name to show, unnecessary when default slot is used.string-
From config:
loading: {
  icon: "loading"
}
iconSizeIcon sizestringsmall, medium, large
From config:
loading: {
  iconSize: "medium"
}
iconSpinEnable spin effect on iconboolean-
From config:
loading: {
  iconSpin: true
}
labelNotification label, unnecessary when default slot is used.string-
overrideOverride existing theme classes completelyboolean-

Events

Event namePropertiesDescription
update:activevalue boolean - updated active propactive prop two-way binding
update:fullPagevalue boolean - updated fullPage propfullPage prop two-way binding
closevalue unknown - close event dataon component close event

Slots

NameDescriptionBindings
defaultOverride icon and labelclose close - function to close the component

Class Inspector

Classes applied to the element:
Class propDescriptionPropsSuffixes
rootClassClass of the root element.
fullPageClassClass for the root element when fullpage.fullPage
overlayClassClass of the overlay element.
iconClassClass for the icon element.
labelClassClass for the label element.
scrollClipClassClass of the body when fullpage and scroll is clipped.clipScroll
scrollKeepClassClass of the body when fullpage and scroll is keeped.clipScroll

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$loading-overlay-legacy#7f7f7f
$loading-overlayrgba(255, 255, 255, 0.5)
$loading-zindex29
$loading-fullpage-zindex999

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$loading-background-colorrgba(255, 255, 255, 0.5)
$loading-icon-size3em
$loading-icon-size-full-page5em
$loading-z29

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault
$loading-zindex$zindex-sticky
$loading-zindex-fullpage$zindex-fixed
$loading-overlayrgba(255, 255, 255, 0.5)

See ➜ 📄 Full scss file

Released under the MIT License.