# Loading

A simple loading overlay


edit on github

# Examples

# Base

# Slot

# Programmatically

# Programmatically (with promise)

# Class props

📄 Full scss file


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

How does Class props inspector work?
Class prop Description Props Suffixes
fullPageClass Class for the root element when fullpage. fullPage
iconClass Class for the loading icon.
overlayClass Class of the loading overlay.
rootClass Class of the root element.


# Props

Prop name Description Type Values Default
active Whether modal is active or not, use the .sync modifier (Vue 2.x) or v-model:active (Vue 3.x) to make it two-way binding boolean -
animation string -
From config

loading: {
  animation: 'fade'
}
canCancel Can close Loading by pressing escape or clicking outside boolean - false
container object|func|HTMLElement -
fullPage Loader will overlay the full page boolean - true
icon Icon name string -
From config

loading: {
  icon: 'loading'
}
iconSize string - 'medium'
iconSpin Enable spin effect on icon boolean - true
onCancel Callback function to call after user canceled (pressed escape / clicked outside) func - Default function (see source code)
overlay boolean - true
override Override classes boolean - false

# Events

Event name Properties Description
close
update:active
update:full-page

# Slots

Name Description Bindings
default

# Style

CSS Variable SASS Variable Default
--oruga-loading-overlay-legacy $loading-overlay-legacy #7f7f7f
--oruga-loading-overlay $loading-overlay rgba(255,255,255,0.5)
--oruga-loading-zindex $loading-zindex 29
--oruga-loading-fullpage-zindex $loading-fullpage-zindex 999