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

Sass variables

Current theme ➜ Oruga Base

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

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$skeleton-backgroundlinear-gradient( 90deg, $grey-lighter 25%, rgba($grey-lighter, 0.5) 50%, $grey-lighter 75%)
$skeleton-border-radius$base-border-radius
$skeleton-duration1.5s
$skeleton-margin0.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 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.