Skeleton

A placeholder for content to load

---

edit on github

Examples

Base

<template>
  <section>
    <o-field grouped group-multiline>
      <o-switch v-model="animated">Animated</o-switch>
    </o-field>

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

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

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

    <o-skeleton :animated="animated"></o-skeleton>

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

    <o-skeleton :animated="animated" size="large" :count="2"></o-skeleton>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        animated: true
      }
    }
  }
</script>

Class props

📄 Full scss file

How does Class props 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.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

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. You'll find more info in the "Overriding section".

Class prop	Description	Props	Suffixes
animationClass	Class of the skeleton animation.
itemClass	Class of the skeleton item.
itemRoundedClass	Class of the skeleton item rounded.	rounded
positionClass	Class of the skeleton position.	position	left centered right
rootClass	Class of the root element.
sizeClass	Class of the skeleton size.	size	small medium large

Props

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

Style

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