Loading
A simple loading overlay
Class props
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 |
container | DOM 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: { |
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 | - | |
onCancel | Callback function to call after user canceled (pressed escape / clicked outside). | () => void | - | Default function (see source code) |
onClose | Callback function to call after close (programmatically close or user canceled). | () => void | - | Default function (see source code) |
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 any - close event data | on component close event |
Slots
Name | Description | Bindings |
---|---|---|
default | Override icon and label | close close - function to close the component |
Sass variables
Current theme ➜ Oruga Base
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 ➜ Oruga Full
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
The theme does not have any custom variables for this component.
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