Skip to content

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.

Circle

Make in round using the circle prop.

Sizes

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

Position

Use the position prop to define the vertical placement.

Skeleton component

A placeholder for content to load.

html
<o-skeleton></o-skeleton>

Props

Prop nameDescriptionTypeValuesDefault
activeShow or hide loaderboolean-true
animatedShow a loading animationboolean-
From config:
skeleton: {
  animated: true
}
circleShow a circle shapeboolean-false
countNumber of shapes to displaynumber-1
heightCustom heightnumber | string-
overrideOverride existing theme classes completelyboolean-
positionSkeleton position in relation to the element"centered" | "left" | "right"left, centered, right"left"
roundedEnable rounded styleboolean-
From config:
skeleton: {
  rounded: true
}
sizeSize of skeletonstringsmall, medium, large
widthCustom widthnumber | string-

Class Inspector

Classes applied to the element:
Class propDescriptionPropsSuffixes
rootClassClass of the root element.
positionClassClass of the root element with position.positionleft
centered
right
itemClassClass of the item element.
sizeClassClass of the item element with size.sizesmall
medium
large
animatedClassClass of the item element when animated.
roundedClassClass of the item element when rounded.rounded

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$skeleton-backgroundlinear-gradient( 90deg, $grey-lighter 25%, rgba($grey-lighter, 0.5) 50%, $grey-lighter 75%)
$skeleton-border-radiusvar(--#{$prefix}base-border-radius)
$skeleton-duration1.5s
$skeleton-margin0.5rem 0 0 0

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$skeleton-duration1.5s
$skeleton-margin-top0.5rem
$skeleton-border-radiuscss.getVar("radius")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault
$skeleton-bg-color$dark-bg-subtle
$skeleton-bglinear-gradient( 90deg, $skeleton-bg-color 25%, rgba($skeleton-bg-color, 0.5) 50%, $skeleton-bg-color 75%)
$skeleton-duration1.5s
$skeleton-margin0.5rem 0 0 0

See ➜ 📄 Full scss file

Released under the MIT License.