Skeleton

Indicate content loading state

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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

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 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>
    </>
  );
}

Go back

RingProgress – @mantine/core

Up next

Box – @mantine/core

Build fully functional accessible web applications faster than ever

About

Contribute Media assets Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter