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);

css

Circle

Show code

HTML

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

js

css

Sizes

Show code

HTML

<section>
    <o-field label="Small" grouped>
        <o-skeleton size="small" />
    </o-field>
    <o-field label="Default" grouped>
        <o-skeleton />
    </o-field>
    <o-field label="Medium" grouped>
        <o-skeleton size="medium" />
    </o-field>
    <o-field label="Large" grouped>
        <o-skeleton size="large" />
    </o-field>
</section>

js

css

Position

Show code

HTML

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

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

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

js

css

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	string	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 Base

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

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

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

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

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