Skip to content

Skeleton

A placeholder for content to load

Examples

Base

Show code

Circle

Show code

Sizes

Show code

Position

Show code

Class props

'Classes applied to the element'

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 heightstring | number-
overrideOverride existing theme classes completelyboolean-
positionSkeleton position in relation to the element"left" | "right" | "centered"left, centered, right"left"
roundedEnable rounded styleboolean-
From config:
skeleton: {
  rounded: true
}
sizeSize of skeletonstringsmall, medium, large
widthCustom widthstring | number-

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-border-radiuscss.getVar("radius")
$skeleton-duration1.5s
$skeleton-margin-top0.5rem

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.