On this page

Skeleton

A placeholder for content to load

Base

Animated

Class props

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 centered right`
rootClass	Class of the root element.
sizeClass	Class of the skeleton size.	`size`	`small medium large`

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		boolean	-
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

📄 Full scss file

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