Skip to content
On this page

Skeleton

A placeholder for content to load

Base

Class props


How does 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


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-

Style

📄 Full scss file

CSS VariableSASS VariableDefault
--oruga-skeleton-background$skeleton-backgroundlinear-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-duration1.5s
--oruga-skeleton-margin$skeleton-margin.5rem 0 0 0

Released under the MIT License.