Skeleton

The Skeleton component can be used as a loading animations or space-fillers while waiting for the actual content to load.

Examples

Base

The length of the loading beam can be defined using the width prop.

Show code

HTML

<section>
    <o-field grouped>
        <o-switch v-model="animated" label="Animated" />
    </o-field>

    <o-field label="20%">
        <o-skeleton width="20%" :animated="animated" />
    </o-field>

    <o-field label="40%">
        <o-skeleton width="40%" :animated="animated" />
    </o-field>

    <o-field label="80%">
        <o-skeleton width="80%" :animated="animated" />
    </o-field>

    <o-field label="100%">
        <o-skeleton :animated="animated" />
    </o-field>

    <o-field label=" Count 2">
        <o-skeleton :animated="animated" :count="2" />
    </o-field>
</section>

JS

import { ref } from "vue";

const animated = ref(true);

Circle

Make in round using the circle prop.

Show code

HTML

<section>
    <o-skeleton circle width="64px" height="64px" />
</section>

Sizes

The component can be displayed in different sizes using the size prop.

Show code

HTML

<section>
    <o-field label="Small">
        <o-skeleton size="small" />
    </o-field>

    <o-field label="Default">
        <o-skeleton />
    </o-field>

    <o-field label="Medium">
        <o-skeleton size="medium" />
    </o-field>

    <o-field label="Large">
        <o-skeleton size="large" />
    </o-field>
</section>

Position

Use the position prop to define the vertical placement.

Show code

HTML

<section>
    <o-field label="Left">
        <o-skeleton width="30%" position="left" />
    </o-field>

    <o-field label="Center">
        <o-skeleton width="30%" position="centered" />
    </o-field>

    <o-field label="Right">
        <o-skeleton width="30%" position="right" />
    </o-field>
</section>

Skeleton Component

A placeholder for content to load.

<o-skeleton></o-skeleton>

Props

Prop name	Description	Type	Values	Default
active	Show or hide loader	boolean	-	true
animated	Show a loading animation	boolean	-	From config: skeleton: {   animated: true }
circle	Show a circle shape	boolean	-	false
count	Number of shapes to display	number	-	1
height	Custom height	number | string	-
override	Override existing theme classes completely	boolean	-
position	Skeleton position in relation to the element	"centered" | "left" | "right"	left, centered, right	"left"
rounded	Enable rounded style	boolean	-	From config: skeleton: {   rounded: true }
size	Size of skeleton	string	small, medium, large
width	Custom width	number | string	-

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.
positionClass	Class of the root element with position.	position	left centered right
itemClass	Class of the item element.
sizeClass	Class of the item element with size.	size	small medium large
animatedClass	Class of the item element when animated.
roundedClass	Class of the item element when rounded.	rounded

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default
$skeleton-spacer	0.5em
$skeleton-duration	1.5s
$skeleton-font-size	h.useVar("font-size")
$skeleton-background-color	vars.$grey-lighter
$skeleton-background	linear-gradient( 90deg, $skeleton-background-color 25%, rgba($skeleton-background-color, 0.5) 50%, $skeleton-background-color 75%)
$skeleton-border-radius	h.useVar("border-radius")
$skeleton-border-radius-rounded	h.useVar("border-radius-rounded")

See ➜ 📄 SCSS file

Current theme ➜ Bulma

SASS Variable	Default
$skeleton-duration	1.5s
$skeleton-margin-top	0.5rem
$skeleton-border-radius	css.getVar("radius")

See ➜ 📄 SCSS file

Current theme ➜ Bootstrap

SASS Variable	Default
$skeleton-bg-color	$dark-bg-subtle
$skeleton-bg	linear-gradient( 90deg, $skeleton-bg-color 25%, rgba($skeleton-bg-color, 0.5) 50%, $skeleton-bg-color 75%)
$skeleton-duration	1.5s
$skeleton-margin	0.5rem 0 0 0

See ➜ 📄 SCSS file