Skeleton

A skeleton component provides a placeholder of the UI while data is loading, improving perceived responsiveness.

Expand code


<div className={'header'}>
  <Skeleton width={'2rem'} height={'2rem'} radius={'50%'}/>
  <Skeleton width={'15rem'}/>
</div>
 
<Skeleton height={'9rem'} radius={'5px'}/>
<Skeleton width={'75%'} radius={'15px'}/>

Size

Customize the skeleton dimensions with the height and width props.

Expand code


<Skeleton height={'7rem'} width={'12rem'}/>
<Skeleton height={'10rem'} width={'5rem'}/>

Pulse animation

By default, every Skeleton has a pulse animation. To disable it, use the disableAnimation prop.

Expand code


<div className={'header'}>
  <Skeleton width={'2rem'} height={'2rem'} radius={'50%'} disableAnimation/>
  <Skeleton width={'15rem'} disableAnimation/>
</div>
 
<Skeleton height={'9rem'} radius={'5px'} disableAnimation/>
<Skeleton width={'75%'} radius={'15px'} disableAnimation/>

The default animation duration is 2.5 seconds. To customize it, override the CSS variable --uil-pulse-anim.

Radius

Use the radius prop to customize the border radius.

Expand code


<Skeleton height={'5rem'} width={'5rem'}/>
<Skeleton height={'5rem'} width={'5rem'} radius={'5px'}/>
<Skeleton height={'5rem'} width={'5rem'} radius={'25%'}/>
<Skeleton height={'5rem'} width={'5rem'} radius={'50%'}/>

Props

Name	Type	Default	Description
dark	`boolean`	false	Use the darkmode style
disableAnimation	`boolean`	false	Disables the pulse animation
height	`string` \| number	1rem	Set the component height
radius	`string`	-	Set the border radius
width	`string` \| number	100%	Set the component width