Skeleton

A skeleton is used as a placeholder element that the user sees before the actual content is loaded.

Installyarn add @diallink-corp/convergo-react-skeleton
Version4.1.2
Usageimport {Skeleton} from '@diallink-corp/convergo-react-skeleton'

Example

<Skeleton width='100%' height='30px' />
<Skeleton width='100%' height='30px' />
<Skeleton
  width="100%"
  height="30px"
/>

Variants

The Skeleton component offers three different variants that set a distinctive shape.

<div>
  <Skeleton width='100%' height='30px' variant='text' />
  <br />
  <Skeleton width='100%' height='30px' variant='rect' />
  <br />
  <Skeleton width='30px' height='30px' variant='circle' />
</div>
<div>
  <Skeleton width='100%' height='30px' variant='text' />
  <br />
  <Skeleton width='100%' height='30px' variant='rect' />
  <br />
  <Skeleton width='30px' height='30px' variant='circle' />
</div>
<div>
  <Skeleton
    width="100%"
    height="30px"
    variant="text"
  />
  <br />
  <Skeleton
    width="100%"
    height="30px"
    variant="rect"
  />
  <br />
  <Skeleton
    width="30px"
    height="30px"
    variant="circle"
  />
</div>

Animations

The Skeleton component offers different animations to alter its style.

<div>
  <Skeleton width='100%' height='30px' animation='pulse' />
  <br />
  <Skeleton width='100%' height='30px' animation='wave' />
  <br />
  <Skeleton width='100%' height='30px' animation='none' />
</div>
<div>
  <Skeleton width='100%' height='30px' animation='pulse' />
  <br />
  <Skeleton width='100%' height='30px' animation='wave' />
  <br />
  <Skeleton width='100%' height='30px' animation='none' />
</div>
<div>
  <Skeleton
    width="100%"
    height="30px"
    animation="pulse"
  />
  <br />
  <Skeleton
    width="100%"
    height="30px"
    animation="wave"
  />
  <br />
  <Skeleton
    width="100%"
    height="30px"
    animation="none"
  />
</div>

API