OrugaLoading
A simple loading overlay
Examples
Base
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Slot
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Programmatically
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Class props
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Click on "Inspect" button to open the loadingLoading component
<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 | - | |
| animation | string | - | From config: loading: { | |
| 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: { |
| 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) |
| override | boolean | - | ||
| programmatic | object | - | ||
| promise | Promise | - |
Events
| Event name | Properties | Description |
|---|---|---|
| update:active | ||
| close | ||
| update:full-page |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |
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