Skip to content
On this page

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'
How does the Class props inspector work?
Class propDescriptionPropsSuffixes
animationClassClass of the skeleton animation.
itemClassClass of the skeleton item.
itemRoundedClassClass of the skeleton item rounded.rounded
positionClassClass of the skeleton position.positionleft
centered
right
rootClassClass of the root element.
sizeClassClass of the skeleton size.sizesmall
medium
large

Skeleton component

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

Props

Prop nameDescriptionTypeValuesDefault
activeShow or hide loaderboolean-true
animatedShow a loading animationboolean-true
circleShow a circle shapeboolean-
countNumber of shapes to displaynumber-1
heightCustom heightnumber|string-
overrideboolean-
positionSkeleton position in relation to the elementstringleft, centered, right'left'
roundedRounded styleboolean-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.