Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Skeleton

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeConfigurationSpaceInteraction statesStyleColor schemeConfigurationSpaceInteraction states

Style

A skeleton uses basic shapes to provide a low-fidelity representation of loading content. A gradient animation overlays the shapes to indicate activity.

Anatomy

A stack of long bars represent a skeleton group, with both a heading skeleton and three body skeletons. A shape skeleton can be a circle, square, or rectangle.
  1. Heading skeleton
  2. Body text skeleton group
  3. Skeleton group
  4. Shape skeleton

Color scheme

Skeletons are available in both light and dark schemes. The shapes use varying opacities of --rh-color-black and --rh-color-white to make them visible against different background colors.

Helpful tip

It is recommended to match color schemes. For example, if you are working in a section with a dark background, use the dark color scheme skeleton.

Light scheme

When used over a light background, a text skeleton group and a rectangle skeleton are filled with a light gray gradient.

Dark scheme

When used over a dark background, a text skeleton group and a rectangle skeleton are filled with a dark gray gradient.

Configuration

Types

There are five types of skeletons: body text, heading, circle, square, and rectangle.

Body text, heading, circle, square, and rectangle skeletons.

Sizes

Body text and heading skeleton sizes are named based on their corresponding font size tokens, and the sizes range from xs to 2xl.

Helpful tip

These are the sizes built into the element. However, the sizes can be customized with CSS, as the skeleton is primarily lightDOM-based.

 Site status table shows websites and statuses. Body text skeletons appear in the status column.

The default and only built-in size for shape skeletons sets its height to the value of --rh-length-4xl. However, most shape skeletons will need to use a custom size, and any length token or pixel value can be used to change their dimensions.

A square skeleton in the default size and one in a larger custom size.

Space

The space between body text skeletons is --rh-space-xs. Otherwise, spacing should be based on the structure of the page or section.

A stack of three text skeletons with four-pixel spacers in between each skeleton

Interaction states

A skeleton is intentionally not operable or navigable and has no interaction states.

Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify