Loading

A simple loading overlay

Examples

Base

Show code

HTML

<section>
    <o-field>
        <o-button
            label="Launch loading"
            size="medium"
            variant="primary"
            @click="openLoading" />
    </o-field>
    <o-field>
        <o-switch
            v-model="isFullPage"
            label="Display loader over full page" />
    </o-field>
    <p style="position: relative">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
        fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit
        sapien laoreet elit
        <o-loading
            v-model:active="isLoading"
            :full-page="isFullPage"
            label="Loading..."
            :cancelable="true" />
    </p>
</section>

JS

import { ref } from "vue";

const isLoading = ref(false);
const isFullPage = ref(true);

function openLoading() {
    isLoading.value = true;
    setTimeout(() => (isLoading.value = false), 10 * 1000);
}

Slot

Show code

HTML

<section>
    <o-field>
        <o-button
            label="Launch loading"
            size="medium"
            variant="primary"
            @click="openLoading" />
    </o-field>
    <o-field>
        <o-switch
            v-model="isFullPage"
            label="Display loader over full page" />
    </o-field>
    <p style="position: relative">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
        fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit
        sapien laoreet elit
        <o-loading
            v-model:active="isLoading"
            :full-page="isFullPage"
            :cancelable="true">
            <o-icon pack="fas" icon="sync-alt" size="large" spin />
        </o-loading>
    </p>
</section>

JS

import { ref } from "vue";

const isLoading = ref(false);
const isFullPage = ref(true);

function openLoading() {
    isLoading.value = true;
    setTimeout(() => (isLoading.value = false), 10 * 1000);
}

Programmatically

Show code

HTML

<section>
    <o-field>
        <o-button
            label="Launch loading"
            size="medium"
            variant="primary"
            @click="openLoading" />
    </o-field>
    <o-field>
        <o-switch
            v-model="isFullPage"
            label="Display loader over full page" />
    </o-field>
    <p ref="elementRef" style="position: relative">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id
        fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit
        sapien laoreet elit
    </p>
</section>

JS

import { ref } from "vue";
import { useOruga } from "@oruga-ui/oruga-next";

const oruga = useOruga();

const elementRef = ref(null);
const isFullPage = ref(true);

function openLoading(): void {
    const loadingComponent = oruga.loading.open({
        fullPage: isFullPage.value,
        container: isFullPage.value ? null : elementRef.value,
    });
    setTimeout(() => loadingComponent.close(), 3 * 1000);
}

Class props

'Classes applied to the element'

Loading component

A simple loading overlay

<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: {   animation: "fade" }
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: {   container: "body" }
fullPage	Loader will overlay the full page.	boolean	-	true
icon	Icon name to show, unnecessary when default slot is used.	string	-	From config: loading: {   icon: "loading" }
iconSize	Icon size	string	small, medium, large	From config: loading: {   iconSize: "medium" }
iconSpin	Enable spin effect on icon	boolean	-	From config: loading: {   iconSpin: true }
label	Notification label, unnecessary when default slot is used.	string	-
onClose	Callback function to call on 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

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