Skeleton

The Skeleton component renders a colored block with an animated background, indicating that something is loading.

OverviewPropertiesUsage

Skeleton vs. SkeletonText

Use the SkeletonText to represent textual content and the Skeleton to represent all other kinds of content.

Skeleton vs. other progress indicators

Skeleton

• Use Skeletons when your app is loading for the first time or if most of a page or view is in a loading state. They improve the perceived performance and are a subtle indicator of something happening in the background.
• Skeletons can help prevent layout shifts if the loaded content is substantially different in size than the loading indicator.

ProgressBar or ProgressCircle

• Use a ProgressBar or ProgressCircle to indicate that a specific part of a page is loading. For example, when uploading a file or fetching data from a server takes time.
• A ProgressBar or ProgressCircle draws attention and should ideally be shown once per view.

ProgressBar and ProgressCircle page.