Skeleton

Indicate content loading state
Import

Usage

Use Skeleton to create a placeholder for loading content. Component support following props:

  • height – height in px (number) or string for other CSS values
  • width – width in px (number) or string for other CSS values
  • radius – value from theme.radius or number to set border-radius in px
  • circle – if true width, height and border-radius will equal to value specified in height prop
  • animate – true by default, controls animation
import { Skeleton } from '@mantine/core';
function Demo() {
return (
<>
<Skeleton height={50} circle mb="xl" />
<Skeleton height={8} radius="xl" />
<Skeleton height={8} mt={6} radius="xl" />
<Skeleton height={8} mt={6} width="70%" radius="xl" />
</>
);
}

With content

If you want to indicate loading state of content that is already on page you can wrap it with Skeleton and control loading overlay visibility with visible prop:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi dolor nihil amet tempore magnam optio, numquam nostrum inventore tempora assumenda saepe, aut repellat. Temporibus aspernatur aperiam magnam debitis facere odio?
Laborum fuga quam voluptas aut pariatur delectus repudiandae commodi tempora debitis dolores vero cumque magni cum, deserunt, ad tempore consectetur libero molestias similique nemo eum! Dolore maxime voluptate inventore atque.
import { useState } from 'react';
import { Skeleton, Button } from '@mantine/core';
function Demo() {
const [loading, setLoading] = useState(true);
return (
<>
<Skeleton visible={loading}>
Lorem ipsum dolor sit amet...
{/* other content */}
</Skeleton>
<Button onClick={() => setLoading((l) => !l)}>
Toggle Skeleton
</Button>
</>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Skeleton component props

NameTypeDescription
animate
boolean
Whether to show the animation effect
circle
boolean
If Skeleton is a circle, it's width and border-radius will be equal to height
height
string | number
Skeleton height
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Radius from theme.radius or number to set border-radius in px
visible
boolean
Should skeleton overlay be displayed
width
string | number
Skeleton width