This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

SkeletonContainer

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

NameRequiredDefaultTypeDescription
animateIdstring
ariaLabelLoading component...stringLabel attribute
backgroundColor#e5ebedstringBackground color of the skeleton
backgroundOpacity1numberBackground opacity of the skeleton
clipIdstring
foregroundColor#f7f9fastringColor of the foreground skeleton items
foregroundOpacity1numberOpacity of the foreground skeleton items
gradientIdstring
height100%
string
number
isAnimatedtrue
false
true
Whether skeleton has animation or not
preserveAspectRatiostring
speed2
string
number
Speed of the animation
svgHeight100%
string
number
Height of the SVG element
svgWidth100%
string
number
Width of the SVG element
width100%
string
number
childrenrequiredReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-skeleton-formstringA [data-test-id] attribute used for testing purposes