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

Skeleton

OverviewStyleGuidelinesCodeAccessibilityDemos
SkeletonCircleColor ContextRectangleSquareTextSkeletonCircleColor ContextRectangleSquareText

Skeleton

Default skeleton displaying a body-copy placeholder with a shimmer animation.

import '@rhds/elements/rh-skeleton/rh-skeleton.js';
 
<rh-skeleton></rh-skeleton>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">
 
import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Skeleton />
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);

Circle

Circle skeleton used to represent a loading circular element such as an avatar.

import '@rhds/elements/rh-skeleton/rh-skeleton.js';
 
<rh-skeleton type="circle"></rh-skeleton>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">
 
import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Skeleton type="circle" />
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);

Color Context

Skeleton adapting to different color contexts using light and dark schemes.

import '@rhds/elements/rh-skeleton/rh-skeleton.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
 
<rh-context-demo>
  <rh-skeleton></rh-skeleton>
</rh-context-demo>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">
 
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <Skeleton />
  </ContextDemo>
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);

Rectangle

Rectangle skeleton used to represent a loading rectangular element such as an image or card.

import '@rhds/elements/rh-skeleton/rh-skeleton.js';
 
<rh-skeleton type="rectangle"></rh-skeleton>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">
 
import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Skeleton type="rectangle" />
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);

Square

Square skeleton used to represent a loading square element such as an icon or thumbnail.

import '@rhds/elements/rh-skeleton/rh-skeleton.js';
 
<rh-skeleton type="square"></rh-skeleton>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">
 
import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Skeleton type="square" />
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);

Text

Body copy and heading skeletons in all available sizes from xs to 2xl.

import '@rhds/elements/rh-skeleton/rh-skeleton.js';
 
<h2>Body Copy Skeletons</h2>
<rh-skeleton type="body-copy" size="xs"></rh-skeleton>
<rh-skeleton type="body-copy" size="sm"></rh-skeleton>
<rh-skeleton type="body-copy" size="md"></rh-skeleton>
<rh-skeleton type="body-copy" size="lg"></rh-skeleton>
<rh-skeleton type="body-copy" size="xl"></rh-skeleton>
<rh-skeleton type="body-copy" size="2xl"></rh-skeleton>

<h2>Heading Skeletons</h2>
<rh-skeleton type="heading" size="xs"></rh-skeleton>
<rh-skeleton type="heading" size="sm"></rh-skeleton>
<rh-skeleton type="heading" size="md"></rh-skeleton>
<rh-skeleton type="heading" size="lg"></rh-skeleton>
<rh-skeleton type="heading" size="xl"></rh-skeleton>
<rh-skeleton type="heading" size="2xl"></rh-skeleton>

<link rel="stylesheet" href="../rh-skeleton-lightdom.css">
 
import { Skeleton } from "@rhds/elements/react/rh-skeleton/rh-skeleton.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <h2>Body Copy Skeletons</h2>
  <Skeleton type="body-copy" size="xs" />
  <Skeleton type="body-copy" size="sm" />
  <Skeleton type="body-copy" size="md" />
  <Skeleton type="body-copy" size="lg" />
  <Skeleton type="body-copy" size="xl" />
  <Skeleton type="body-copy" size="2xl" />
  <h2>Heading Skeletons</h2>
  <Skeleton type="heading" size="xs" />
  <Skeleton type="heading" size="sm" />
  <Skeleton type="heading" size="md" />
  <Skeleton type="heading" size="lg" />
  <Skeleton type="heading" size="xl" />
  <Skeleton type="heading" size="2xl" />
  <link rel="stylesheet" href="../rh-skeleton-lightdom.css" />
);
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify