Skip to main content

    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​

    An example of a skeleton loading pattern next to a ProgressBar and ProgressCircle.

    An example of a skeleton loading pattern next to a ProgressBar and ProgressCircle.

    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.

    Still have questions?
    Find answers in the Dynatrace Community