Skeleton

A placeholder for content to load

Examples

Base

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

Show code

HTML

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

Sizes

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

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>

Class props

'Classes applied to the element'

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	-

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$skeleton-background	linear-gradient( 90deg, $grey-lighter 25%, rgba($grey-lighter, 0.5) 50%, $grey-lighter 75%)
$skeleton-border-radius	var(--#{$prefix}base-border-radius)
$skeleton-duration	1.5s
$skeleton-margin	0.5rem 0 0 0

See ➜ 📄 Full scss file

Current theme ➜ Bulma

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

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