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".

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"
            label="Loading..."
            close-on-outside
            close-on-escape
            :full-page="isFullPage" />
    </p>
</section>

JS

import { ref } from "vue";

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

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

Slot

Override the loading icon by passing a default 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"
            close-on-outside
            close-on-escape
            :full-page="isFullPage">
            <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(): void {
    isLoading.value = true;
    setTimeout(() => (isLoading.value = false), 10 * 1000);
}

Programmatically

This component provides a programmatic interface that can be accessed by the useOruga() composable. The composable can be used from outside the Vue instance. For example, it can be used in Pinia or Vue Router with this syntax:

    import { useOruga } from "@oruga-ui/oruga-next";
    const oruga = useOruga();
    oruga.loading.open({...});
        

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="contentElement" 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, useTemplateRef } from "vue";
import { useOruga } from "@oruga-ui/oruga-next";

const oruga = useOruga();

const elementRef = useTemplateRef("contentElement");
const isFullPage = ref(true);

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

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	deprecated - use closeOnOutside and closeOnEscape Is Loading cancelable by pressing escape or clicking outside	boolean	-
clipScroll	Set true to remove the body scrollbar when fullPage. 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: {   clipScroll: false }
closeOnEscape	Close when pressing escape key	boolean	-	false
closeOnOutside	Close when clicked outside of the panel	boolean	-	false
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" }
iconPack	Icon pack to use for the close icon	string	mdi, fa, fas and any other custom icon pack	From config: loading: {   iconPack: undefined }
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	Show a label beside the icon, 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	event Event - native event	on active state changes to false

Slots

Name	Description	Bindings
default	Override icon and label	close close - function to close the component

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class Inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

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-spacer	h.useVar("control-spacer")
$loading-color	h.useVar("font-color")
$loading-font-size	h.useVar("font-size")
$loading-font-weight	h.useVar("font-weight")
$loading-zindex	map.get(vars.$zindex, "sticky")
$loading-fullpage-zindex	map.get(vars.$zindex, "fixed")
$loading-overlay-background-color	rgba(255, 255, 255, 0.5)

See ➜ 📄 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 ➜ 📄 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 ➜ 📄 SCSS file