Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
        • Dots
        • Inline
        • Progress
        • Skeleton
        • Spinner
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Light
      • Size
    • Configuration
    • API
      • Skeleton

    Skeleton

    A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.

    Table of Contents
    • How to use it
      • Default
      • Light
      • Size
    • Configuration
    • API
      • Skeleton
    Used for this
    • Skeleton is the default loader, used whenever the system can predict the format of the loading content
    • To progressively load different parts of a page
    • To avoid large layout shifts
    Not for this
    • When the system doesn’t have control over the content that is loading, use a Spinner instead
    • To indicate that a component (like a button or search input) is busy, use Dots instead
    • To communicate a typing status, use Inline instead

    How to use it

    Default

    Skeleton loaders are the same color as the text color at 10% opacity.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Light

    Skeleton loaders can be inverted for use on dark backgrounds.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Size

    By default, a Skeleton loader’s height is 60% of the font size. To make placeholders for other components, such as buttons, height and width can be explicitly set.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.4.0•View source•View on npm
    • Installnpm install @zendeskgarden/react-loaders
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Skeleton } from '@zendeskgarden/react-loaders'

    API

    Skeleton

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    height
    		string
    '100%'

    Sets the height as a percentage of parent element's height if the height is not already inherited by line-height

    isLight
    		boolean

    Inverts the color for use on dark backgrounds

    width
    		string
    '100%'

    Sets the width as a percentage of the the parent element's width

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024