Skeleton

Indicate content loading state

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

PackageIcon

@mantine/core

Usage

Use Skeleton to create a placeholder for loading content. Skeleton supports the following props:

height – height – any valid CSS value
width – width - any valid CSS value
radius – key of theme.radius or any valid CSS value to set border-radius
circle – if true, width, height and border-radius will equal the value specified in the height prop
animate – true by default, controls animation

Animate

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 the loading state of content that is already on the page, wrap it with Skeleton and control the loading overlay visibility with the 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>
    </>
  );
}

SemiCircleProgress

Affix