SkeletonContainer

View on Github

How to use SkeletonContainer

The SkeletonContainer component is a wrapper component of the all other skeleton components: SkeletonBodyText, SkeletonDisplayText, SkeletonImage, SkeletonRow

Use can use properties of SkeletonContainer to control color, background color, animation, opacity of the skeleton elements that are used inside.

Import

import { SkeletonContainer } from '@contentful/f36-components';
// or
import { SkeletonContainer } from '@contentful/f36-skeleton';

Code examples

An example with a different color and an increased speed.

Props (API reference)

Name

Type

Default

children
required
ReactNode

animateId
string

ariaLabel
string

Label attribute

Loading component...
backgroundColor
string

Background color of the skeleton

#e5ebed
backgroundOpacity
number

Background opacity of the skeleton

1
className
string

CSS class to be appended to the root element

clipId
string

foregroundColor
string

Color of the foreground skeleton items

#f7f9fa
foregroundOpacity
number

Opacity of the foreground skeleton items

1
gradientId
string

height
string
number

100%
isAnimated
false
true

Whether skeleton has animation or not

true
preserveAspectRatio
string

speed
string
number

Speed of the animation

2
svgHeight
string
number

Height of the SVG element

100%
svgWidth
string
number

Width of the SVG element

100%
testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-skeleton-form
width
string
number

100%