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 name | Description | Type | Values | Default |
---|---|---|---|---|
active | Whether loading is active or not, use v-model:active to make it two-way binding | boolean | - | false |
animation | Custom animation (transition name) | string | - | From config: loading: { |
cancelable | Is Loading cancable by pressing escape or clicking outside. | boolean | - | false |
clipScroll | Set 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: { |
fullPage | Loader will overlay the full page. | boolean | - | true |
icon | Icon name to show, unnecessary when default slot is used. | string | - | From config: loading: { |
iconSize | Icon size | string | small , medium , large | From config: loading: { |
iconSpin | Enable spin effect on icon | boolean | - | From config: loading: { |
label | Notification label, unnecessary when default slot is used. | string | - | |
override | Override existing theme classes completely | boolean | - |
Events
Event name | Properties | Description |
---|---|---|
update:active | value boolean - updated active prop | active prop two-way binding |
update:fullPage | value boolean - updated fullPage prop | fullPage prop two-way binding |
close | value unknown - close event data | on component close event |
Slots
Name | Description | Bindings |
---|---|---|
default | Override icon and label | close close - function to close the component |
Class Inspector
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
rootClass | Class of the root element. | |||
fullPageClass | Class for the root element when fullpage. | fullPage | ||
overlayClass | Class of the overlay element. | |||
iconClass | Class for the icon element. | |||
labelClass | Class for the label element. | |||
scrollClipClass | Class of the body when fullpage and scroll is clipped. | clipScroll | ||
scrollKeepClass | Class of the body when fullpage and scroll is keeped. | clipScroll |
Sass variables
Current theme ➜ Oruga
SASS Variable | Default |
---|---|
$loading-overlay-legacy | #7f7f7f |
$loading-overlay | rgba(255, 255, 255, 0.5) |
$loading-zindex | 29 |
$loading-fullpage-zindex | 999 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
SASS Variable | Default |
---|---|
$loading-background-color | rgba(255, 255, 255, 0.5) |
$loading-icon-size | 3em |
$loading-icon-size-full-page | 5em |
$loading-z | 29 |
See ➜ 📄 Full scss file
Current theme ➜ Bootstrap
SASS Variable | Default |
---|---|
$loading-zindex | $zindex-sticky |
$loading-zindex-fullpage | $zindex-fixed |
$loading-overlay | rgba(255, 255, 255, 0.5) |
See ➜ 📄 Full scss file