# Skeleton

A placeholder for content to load

edit on github

# Examples

# Base

# Class props

📄 Full scss file

How does Class props inspector work?
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
rootClass Class of the root element.
sizeClass Class of the skeleton size. size small

# 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