Skeleton

The Skeleton reserves the space of content while it loads, using a pulsing placeholder shape to signal activity and keep the layout stable. Use rectangle for text lines and blocks, rounded for cards and images, and circle for avatars. The Skeleton has no layout prop — richer placeholders such as text paragraphs or avatar-with-text cards are built by composing several skeletons; see the examples in the Interactive Demo below.

Import

React

// with @dhl-official/react-library:
import { DhlSkeleton } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlSkeleton } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-skeleton></dhl-skeleton>

Vue.js

// with @dhl-official/vue-library:
import { DhlSkeleton } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlSkeleton } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlSkeleton shape="circle" width="48px" height="48px"></DhlSkeleton>

Angular

<dhl-skeleton shape="circle" width="48px" height="48px"></dhl-skeleton>

Vue.js

<dhl-skeleton shape="circle" width="48px" height="48px"></dhl-skeleton>

Examples

Text paragraph

Compose multiple skeletons to represent lines of text.

Code example

<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
  <DhlSkeleton height="16px" />
  <DhlSkeleton height="16px" />
  <DhlSkeleton height="16px" width="60%" />
</div>

Avatar with text

Combine a circular skeleton with text lines to represent a profile summary.

Code example

<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
  <DhlSkeleton shape="circle" width="48px" height="48px" />
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      gap: "8px",
      flexGrow: 1,
    }}
  >
    <DhlSkeleton height="16px" />
    <DhlSkeleton height="16px" width="60%" />
  </div>
</div>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	`dhl-skeleton-${getRandomString()}`
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
height	height	An optional prop defining the height of the skeleton as any valid CSS length. Defaults to filling the container the skeleton replaces.	string	"var(--dui-size-space-full)"
shape	shape	An optional prop defining the shape of the skeleton element. rectangle suits text lines and blocks, rounded suits cards and images,and circle suits avatars.	"circle" | "rectangle" | "rounded"	DHL_SKELETON.SHAPE.RECTANGLE
width	width	An optional prop defining the width of the skeleton as any valid CSS length. Defaults to filling the container the skeleton replaces.	string	"var(--dui-size-space-full)"

---

Built by DHL User Interface Library Team!