Skeleton

Simulate the layout of content while loading

Use the Skeleton component to indicate the loading state of your application. They can be used to improve perceived loading speed, and can provide a seamless transition between loading and fully-loaded content, helping users to stay oriented. They can also help you reduce layout shifts while content is dynamically loaded within your page.

---
import { Skeleton } from 'webcoreui/astro'
---

<Skeleton />

<script>
    import { Skeleton } from 'webcoreui/svelte'
</script>

<Skeleton />

import React from 'react'
import { Skeleton } from 'webcoreui/react'

const Component = () => (
    <Skeleton />
)

export default Component

You can call the Skeleton component without any props. This will create a component that will take up the full width and height of its container.

Setting Dimensions

To change the dimensions of your Skeleton component, you can specify a width and height prop:

<Skeleton width={300} />
<Skeleton width={200} />
<Skeleton width={100} />

<Skeleton height={50} />
<Skeleton height={25} />
<Skeleton height={10} />

Skeleton Types

The Skeleton component also comes with 3 different types; rounded, rectangular, and circle:

<Skeleton type="rectangular" />

<Skeleton type="circle" width={20} height={20} />

Note that you must set the width and height props to the same values when using the circle type, otherwise, your circle will be distorted.

Animations

The default animation of the Skeleton component is a wave animation. This can be configured with the animate prop. It can be changed to pulse or false for no animation:

<Skeleton animate="pulse" />

<Skeleton animate={false} />

Custom Colors

You can customize the colors of your Skeleton component using the color and waveColor props:

<Skeleton
    color="var(--w-color-info)"
    waveColor="var(--w-color-info-accent)"
/>

The waveColor is only used if the animate type is set to wave (default). These props allows you to customize the colors of each Skeleton component. However, if you need to specify a custom color globally for all of your Skeleton components, the preferred way is to override the following CSS variables instead:

html body {
    --w-skeleton-color: var(--w-color-primary-60);
    --w-skeleton-wave-color: var(--w-color-primary-50);
}

API

type SkeletonProps = {
    animate?: 'wave' | 'pulse' | false
    type?: 'rounded' | 'rectangular' | 'circle'
    width?: number
    height?: number
    color?: string
    waveColor?: string
    className?: string
}