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
<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>
</>
);
}
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback