Skip to Content
Patternfly Logo

Skeleton

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesDocumentationCSS Variables

Examples

Default

Percentage width modifiers






Percentage height modifiers

Text modifiers

--pf-global--FontSize--4xl

--pf-global--FontSize--3xl

--pf-global--FontSize--2xl

--pf-global--FontSize--xl

--pf-global--FontSize--lg

--pf-global--FontSize--md

--pf-global--FontSize--sm

Static height width and shape modifiers

Small circle

Medium circle

Large circle

Small square

Medium square

Large square

Small rectangle

Medium rectangle

Large rectangle

Documentation

Usage

ClassApplied toOutcome
.pf-c-skeleton<div>Initiates the skeleton component. Required
.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75].pf-c-skeletonModifies the width of the skeleton. The default is 100%.
.pf-m-height-[sm, md, lg, 25, 33, 50, 66, 75, 100].pf-c-skeletonModifies the height of the skeleton. The default is the inherited font size.
.pf-m-text-[sm, md, lg, xl, 2xl, 3xl, 4xl].pf-c-skeletonModifies the skeleton height to match the height of PatternFly's text elements.
.pf-m-circle.pf-c-skeletonModifies the border radius of the skeleton to be a circle. Use a width modifier to specify the size.
.pf-m-square.pf-c-skeletonModifies the border radius of the skeleton to be a square. Use a width modifier to specify the size.

CSS Variables

.pf-c-skeleton--pf-c-skeleton--BackgroundColorc_skeleton_BackgroundColor
#f5f5f5
.pf-c-skeleton--pf-c-skeleton--Widthc_skeleton_Width
auto
.pf-c-skeleton--pf-c-skeleton--Heightc_skeleton_Height
auto
.pf-c-skeleton--pf-c-skeleton--BorderRadiusc_skeleton_BorderRadius
3px
.pf-c-skeleton--pf-c-skeleton--before--PaddingBottomc_skeleton_before_PaddingBottom
0
.pf-c-skeleton--pf-c-skeleton--before--Heightc_skeleton_before_Height
auto
.pf-c-skeleton--pf-c-skeleton--before--Contentc_skeleton_before_Content
"\00a0"
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientAnglec_skeleton_after_LinearGradientAngle
90deg
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientColorStop1c_skeleton_after_LinearGradientColorStop1
rgba(237, 237, 237, 0)
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientColorStop2c_skeleton_after_LinearGradientColorStop2
#ededed
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientColorStop3c_skeleton_after_LinearGradientColorStop3
rgba(237, 237, 237, 0)
.pf-c-skeleton--pf-c-skeleton--after--TranslateXc_skeleton_after_TranslateX
-100%
.pf-c-skeleton--pf-c-skeleton--after--AnimationNamec_skeleton_after_AnimationName
pf-c-skeleton-loading
.pf-c-skeleton--pf-c-skeleton--after--AnimationDurationc_skeleton_after_AnimationDuration
2s
.pf-c-skeleton--pf-c-skeleton--after--AnimationIterationCountc_skeleton_after_AnimationIterationCount
infinite
.pf-c-skeleton--pf-c-skeleton--after--AnimationTimingFunctionc_skeleton_after_AnimationTimingFunction
linear
.pf-c-skeleton--pf-c-skeleton--after--AnimationDelayc_skeleton_after_AnimationDelay
.5s
.pf-c-skeleton--pf-c-skeleton--m-circle--BorderRadiusc_skeleton_m_circle_BorderRadius
30em
.pf-c-skeleton--pf-c-skeleton--m-circle--before--PaddingBottomc_skeleton_m_circle_before_PaddingBottom
100%
.pf-c-skeleton--pf-c-skeleton--m-text-4xl--Heightc_skeleton_m_text_4xl_Height
calc(2.25rem * 1.3)
.pf-c-skeleton--pf-c-skeleton--m-text-3xl--Heightc_skeleton_m_text_3xl_Height
calc(1.75rem * 1.3)
.pf-c-skeleton--pf-c-skeleton--m-text-2xl--Heightc_skeleton_m_text_2xl_Height
calc(1.5rem * 1.3)
.pf-c-skeleton--pf-c-skeleton--m-text-xl--Heightc_skeleton_m_text_xl_Height
calc(1.25rem * 1.3)
.pf-c-skeleton--pf-c-skeleton--m-text-lg--Heightc_skeleton_m_text_lg_Height
calc(1.125rem * 1.5)
.pf-c-skeleton--pf-c-skeleton--m-text-md--Heightc_skeleton_m_text_md_Height
calc(1rem * 1.5)
.pf-c-skeleton--pf-c-skeleton--m-text-sm--Heightc_skeleton_m_text_sm_Height
calc(0.875rem * 1.5)
.pf-c-skeleton--pf-c-skeleton--m-width-sm--Widthc_skeleton_m_width_sm_Width
6.25rem
.pf-c-skeleton--pf-c-skeleton--m-width-md--Widthc_skeleton_m_width_md_Width
12.5rem
.pf-c-skeleton--pf-c-skeleton--m-width-lg--Widthc_skeleton_m_width_lg_Width
18.75rem
.pf-c-skeleton--pf-c-skeleton--m-width-25--Widthc_skeleton_m_width_25_Width
25%
.pf-c-skeleton--pf-c-skeleton--m-width-33--Widthc_skeleton_m_width_33_Width
calc(100% / 3)
.pf-c-skeleton--pf-c-skeleton--m-width-50--Widthc_skeleton_m_width_50_Width
50%
.pf-c-skeleton--pf-c-skeleton--m-width-66--Widthc_skeleton_m_width_66_Width
calc(100% / 3 * 2)
.pf-c-skeleton--pf-c-skeleton--m-width-75--Widthc_skeleton_m_width_75_Width
75%
.pf-c-skeleton--pf-c-skeleton--m-height-sm--Heightc_skeleton_m_height_sm_Height
6.25rem
.pf-c-skeleton--pf-c-skeleton--m-height-md--Heightc_skeleton_m_height_md_Height
12.5rem
.pf-c-skeleton--pf-c-skeleton--m-height-lg--Heightc_skeleton_m_height_lg_Height
18.75rem
.pf-c-skeleton--pf-c-skeleton--m-height-25--Heightc_skeleton_m_height_25_Height
25%
.pf-c-skeleton--pf-c-skeleton--m-height-33--Heightc_skeleton_m_height_33_Height
calc(100% / 3)
.pf-c-skeleton--pf-c-skeleton--m-height-50--Heightc_skeleton_m_height_50_Height
50%
.pf-c-skeleton--pf-c-skeleton--m-height-66--Heightc_skeleton_m_height_66_Height
calc(100% / 3 * 2)
.pf-c-skeleton--pf-c-skeleton--m-height-75--Heightc_skeleton_m_height_75_Height
75%
.pf-c-skeleton--pf-c-skeleton--m-height-100--Heightc_skeleton_m_height_100_Height
100%
.pf-c-skeleton.pf-m-circle--pf-c-skeleton--BorderRadiusc_skeleton_BorderRadius
30em
.pf-c-skeleton.pf-m-square--pf-c-skeleton--before--Heightc_skeleton_before_Height
0
.pf-c-skeleton.pf-m-square--pf-c-skeleton--before--PaddingBottomc_skeleton_before_PaddingBottom
100%
.pf-c-skeleton.pf-m-width-sm--pf-c-skeleton--Widthc_skeleton_Width
6.25rem
.pf-c-skeleton.pf-m-width-md--pf-c-skeleton--Widthc_skeleton_Width
12.5rem
.pf-c-skeleton.pf-m-width-lg--pf-c-skeleton--Widthc_skeleton_Width
18.75rem
.pf-c-skeleton.pf-m-width-25--pf-c-skeleton--Widthc_skeleton_Width
25%
.pf-c-skeleton.pf-m-width-33--pf-c-skeleton--Widthc_skeleton_Width
calc(100% / 3)
.pf-c-skeleton.pf-m-width-50--pf-c-skeleton--Widthc_skeleton_Width
50%
.pf-c-skeleton.pf-m-width-66--pf-c-skeleton--Widthc_skeleton_Width
calc(100% / 3 * 2)
.pf-c-skeleton.pf-m-width-75--pf-c-skeleton--Widthc_skeleton_Width
75%
.pf-c-skeleton.pf-m-height-sm--pf-c-skeleton--Heightc_skeleton_Height
6.25rem
.pf-c-skeleton.pf-m-height-md--pf-c-skeleton--Heightc_skeleton_Height
12.5rem
.pf-c-skeleton.pf-m-height-lg--pf-c-skeleton--Heightc_skeleton_Height
18.75rem
.pf-c-skeleton.pf-m-height-25--pf-c-skeleton--Heightc_skeleton_Height
25%
.pf-c-skeleton.pf-m-height-33--pf-c-skeleton--Heightc_skeleton_Height
calc(100% / 3)
.pf-c-skeleton.pf-m-height-50--pf-c-skeleton--Heightc_skeleton_Height
50%
.pf-c-skeleton.pf-m-height-66--pf-c-skeleton--Heightc_skeleton_Height
calc(100% / 3 * 2)
.pf-c-skeleton.pf-m-height-75--pf-c-skeleton--Heightc_skeleton_Height
75%
.pf-c-skeleton.pf-m-height-100--pf-c-skeleton--Heightc_skeleton_Height
100%
.pf-c-skeleton.pf-m-text-4xl--pf-c-skeleton--Heightc_skeleton_Height
calc(2.25rem * 1.3)
.pf-c-skeleton.pf-m-text-3xl--pf-c-skeleton--Heightc_skeleton_Height
calc(1.75rem * 1.3)
.pf-c-skeleton.pf-m-text-2xl--pf-c-skeleton--Heightc_skeleton_Height
calc(1.5rem * 1.3)
.pf-c-skeleton.pf-m-text-xl--pf-c-skeleton--Heightc_skeleton_Height
calc(1.25rem * 1.3)
.pf-c-skeleton.pf-m-text-lg--pf-c-skeleton--Heightc_skeleton_Height
calc(1.125rem * 1.5)
.pf-c-skeleton.pf-m-text-md--pf-c-skeleton--Heightc_skeleton_Height
calc(1rem * 1.5)
.pf-c-skeleton.pf-m-text-sm--pf-c-skeleton--Heightc_skeleton_Height
calc(0.875rem * 1.5)