mui.com Open in urlscan Pro
2a05:d014:58f:6201::64  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Skip to content
Influence Material UI's 2024 roadmap! Participate in the latest Developer
SurveySearch…
Ctrl+K
4

MUI Core

Material UIv5.15.15

--------------------------------------------------------------------------------

 * Getting started
 * Components
    * All components
    * Inputs
      * Autocomplete
      * Button
      * Button Group
      * Checkbox
      * Floating Action Button
      * Radio Group
      * Rating
      * Select
      * Slider
      * Switch
      * Text Field
      * Transfer List
      * Toggle Button
    * Data display
      * Avatar
      * Badge
      * Chip
      * Divider
      * Icons
      * Material Icons
      * List
      * Table
      * Tooltip
      * Typography
    * Feedback
      * Alert
      * Backdrop
      * Dialog
      * Progress
      * Skeleton
      * Snackbar
    * Surfaces
      * Accordion
      * App Bar
      * Card
      * Paper
    * Navigation
      * Bottom Navigation
      * Breadcrumbs
      * Drawer
      * Link
      * Menu
      * Pagination
      * Speed Dial
      * Stepper
      * Tabs
    * Layout
      * Box
      * Container
      * Grid
      * Grid v2
        New
      * Stack
      * Image List
      * Hidden
    * Utils
      * Click-Away Listener
      * CSS Baseline
      * Modal
      * No SSR
      * Popover
      * Popper
      * Portal
      * Textarea Autosize
      * Transitions
      * useMediaQuery
    * MUI X
      * Data Grid
      * Date & Time Pickers
      * Charts
      * Tree View
    * Lab
      * About the lab 🧪
      * Masonry
      * Timeline

 * Component API
 * Customization
 * How-to guides
 * Integrations
 * Experimental APIs
 * Migration
 * Discover more
 * Design resources
 * Template store

+




SKELETON

Display a placeholder preview of your content before the data gets loaded to
reduce load-time frustration.
Your new development career awaits. Check out the latest listings. ads via
Carbon

The data for your components might not be immediately available. You can improve
the perceived responsiveness of the page by using skeletons. It feels like
things are happening immediately, then the information is incrementally
displayed on the screen (Cf. Avoid The Spinner).

 * Feedback
 * Bundle size
 * Figma
 * Adobe
 * Sketch


USAGE

The component is designed to be used directly in your components. For instance:

{
  item ? (
    <img
      style={{
        width: 210,
        height: 118,
      }}
      alt={item.title}
      src={item.src}
    />
  ) : (
    <Skeleton variant="rectangular" width={210} height={118} />
  );
}


(or Ctrl + C)


VARIANTS

The component supports 4 shape variants:

 * text (default): represents a single line of text (you can adjust the height
   via font size).
 * circular, rectangular, and rounded: come with different border radius to let
   you take control of the size.

JSTS
Expand code
(or Ctrl + C)

{/* For variant="text", adjust the height via font-size */}
<Skeleton variant="text" sx={{ fontSize: '1rem' }} />

{/* For other variants, adjust the size with `width` and `height` */}
<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="rectangular" width={210} height={60} />
<Skeleton variant="rounded" width={210} height={60} />


{/* For variant="text", adjust the height via font-size */} <Skeleton
variant="text" sx={{ fontSize: '1rem' }} /> {/* For other variants, adjust the
size with `width` and `height` */} <Skeleton variant="circular" width={40}
height={40} /> <Skeleton variant="rectangular" width={210} height={60} />
<Skeleton variant="rounded" width={210} height={60} />
Press Enter to start editing


ANIMATIONS

By default, the skeleton pulsates, but you can change the animation to a wave or
disable it entirely.

JSTS
Expand code
(or Ctrl + C)

<Skeleton />
<Skeleton animation="wave" />
<Skeleton animation={false} />


<Skeleton /> <Skeleton animation="wave" /> <Skeleton animation={false} />
Press Enter to start editing


PULSATE EXAMPLE

Don Diablo @ Tomorrowland Main Stage 2019 | Official…

Don Diablo396k views • a week ago

Queen - Greatest Hits

Queen Official40M views • 3 years ago

Calvin Harris, Sam Smith - Promises (Official Video)

Calvin Harris130M views • 10 months ago








JSTS
Show code


WAVE EXAMPLE

Ted5 hours ago


Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure
of a country's success:









JSTS
Show code


INFERRING DIMENSIONS

In addition to accepting width and height props, the component can also infer
the dimensions.

It works well when it comes to typography as its height is set using em units.

<Typography variant="h1">{loading ? <Skeleton /> : 'h1'}</Typography>


(or Ctrl + C)
h1
h3
body1
caption








JSTS
Show code

But when it comes to other components, you may not want to repeat the width and
height. In these instances, you can pass children and it will infer its width
and height from them.

loading ? (
  <Skeleton variant="circular">
    <Avatar />
  </Skeleton>
) : (
  <Avatar src={data.avatar} />
);


(or Ctrl + C)

.



Ted









JSTS
Show code


COLOR

The color of the component can be customized by changing its background-color
CSS property. This is especially useful when on a black background (as the
skeleton will otherwise be invisible).

JSTS
Expand code
(or Ctrl + C)

<Skeleton
  sx={{ bgcolor: 'grey.900' }}
  variant="rectangular"
  width={210}
  height={118}
/>


<Skeleton sx={{ bgcolor: 'grey.900' }} variant="rectangular" width={210}
height={118} />
Press Enter to start editing


ACCESSIBILITY

Skeleton screens provide an alternative to the traditional spinner method.
Rather than showing an abstract widget, skeleton screens create anticipation of
what is to come and reduce cognitive load.

The background color of the skeleton uses the least amount of luminance to be
visible in good conditions (good ambient light, good screen, no visual
impairments).


ARIA

None.


KEYBOARD

The skeleton is not focusable.


API

See the documentation below for a complete reference to all of the props and
classes available to the components mentioned here.

 * <Skeleton />

Edit this page

Was this page helpful?



--------------------------------------------------------------------------------

ProgressSnackbar

--------------------------------------------------------------------------------

•

Blog

•

Store



MUI stands in solidarity with Ukraine.

Contents

 * Usage
 * Variants
 * Animations
   * Pulsate example
   * Wave example
 * Inferring dimensions
 * Color
 * Accessibility
   * ARIA
   * Keyboard
 * API

Become a Diamond sponsor