# Loading

A simple loading overlay


edit on github

# Examples

# Base

# Slot

# Programmatically

# Props

Prop name Description Type Values Default
active Whether modal is active or not, use the .sync modifier to make it two-way binding boolean -
programmatic boolean -
container object|func|HTMLElement -
fullPage Loader will overlay the full page boolean - true
animation string - Config -> 'loading.animation': 'fade'
canCancel Can close Loading by pressing escape or clicking outside boolean - false
onCancel Callback function to call after user canceled (pressed escape / clicked outside) func - () => {}
icon Icon name string - Config -> 'loading.icom': 'spin'
iconSpin Enable spin effect on icon boolean - true
rootClass string -
backgroundClass string -
iconClass string -

# Events

Event name Type Description
close
update:active undefined
update:full-page undefined

# Slots

Name Description Bindings
default

# Style

CSS Variable SASS Variable Default
--oruga-loading-background-legacy $loading-background-legacy #7f7f7f
--oruga-loading-background $loading-background rgba(255,255,255,0.5)
--oruga-loading-fullpage-icon-size $loading-fullpage-icon-size 5em
--oruga-loading-icon-size $loading-icon-size 2.5em
--oruga-loading-zindex $loading-zindex 999