Skip to content

Loading

A simple loading overlay

Examples

Base

Show code

Slot

Show code

Programmatically

Show code

Class props

'Classes applied to the element'

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 binding.boolean-false
animationCustom animation (transition name)string-
From config:
loading: {
  animation: "fade"
}
cancelableIs Loading cancable by pressing escape or clicking outside.boolean-false
containerDOM element where the loading component will be created on (for programmatic usage).
Note that this also changes fullPage to false.
string | HTMLElement-
From config:
loading: {
  container: "body"
}
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-
onCancelCallback function to call after user canceled (pressed escape / clicked outside).() => void-Default function (see source code)
onCloseCallback function to call after close (programmatically close or user canceled).() => void-Default function (see source code)
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 any - close event dataon component close event

Slots

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

Sass variables

Current theme ➜ Oruga Base

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

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

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

The theme does not have any custom variables for this component.

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.