Skeleton

The Skeleton component renders a colored block with an animated background, indicating that something is loading.

Import

import { Skeleton } from '@dynatrace/strato-components-preview/layouts-core';

Use cases

Basic

In its most basic version, you can use the Skeleton as a self-closing tag, without providing any further props. It will use up whatever space is available in the parent container.

CodeSandbox

Setting the dimensions

To specify the dimensions of the Skeleton, you can provide the width and height prop.

CodeSandbox

Changing the variant

The Skeleton can be rendered in different variants using the variant prop.

CodeSandbox

Props

SkeletonProps

extends, ,

Name	Type	Default	Description
variant?	|	'default'	Defines the shape of the Skeleton.
width?	[]	100%	Width of the Skeleton placeholder.
height?	[]	100%	Height of the Skeleton placeholder.