Skip to content
Patternfly Logo

Info alert:Beta feature

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

Examples

Default

Loading contents

Percentage widths

Loading contents





Percentage heights

Loading contents

Text modifiers

--pf-global--FontSize--4xl
Loading font size 4xl

--pf-global--FontSize--3xl
Loading font size 3xl

--pf-global--FontSize--2xl
Loading font size 2xl

--pf-global--FontSize--xl
Loading font size xl

--pf-global--FontSize--lg
Loading font size lg

--pf-global--FontSize--md
Loading font size md

--pf-global--FontSize--sm
Loading font size sm

Shapes

Small circle
Loading small circle contents

Medium circle
Loading medium circle contents

Large circle
Loading large circle contents

Small square
Loading small square contents

Medium square
Loading medium square contents

Large square
Loading large square contents

Small rectangle
Loading small rectangle contents

Medium rectangle
Loading medium rectangle contents

Large rectangle
Loading large rectangle contents

Props

Skeleton

NameTypeRequiredDefaultDescription
classNamestringNoAdditional classes added to the Skeleton
fontSize'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'NoThe font size height of the Skeleton
heightstringNoThe height of the Skeleton. Must specify pixels or percentage.
screenreaderTextstringNoText read just to screen reader users
shape'circle' | 'square'NoThe shape of the Skeleton
widthstringNoThe width of the Skeleton. Must specify pixels or percentage.

CSS variables

.pf-c-skeleton--pf-c-skeleton--BackgroundColor
#f5f5f5
.pf-c-skeleton--pf-c-skeleton--Width
auto
.pf-c-skeleton--pf-c-skeleton--Height
auto
.pf-c-skeleton--pf-c-skeleton--BorderRadius
3px
.pf-c-skeleton--pf-c-skeleton--before--PaddingBottom
0
.pf-c-skeleton--pf-c-skeleton--before--Height
auto
.pf-c-skeleton--pf-c-skeleton--before--Content
"\00a0"
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientAngle
90deg
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientColorStop1
rgba(237, 237, 237, 0)
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientColorStop2
#ededed
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientColorStop3
rgba(237, 237, 237, 0)
.pf-c-skeleton--pf-c-skeleton--after--TranslateX
-100%
.pf-c-skeleton--pf-c-skeleton--after--AnimationName
pf-c-skeleton-loading
.pf-c-skeleton--pf-c-skeleton--after--AnimationDuration
2s
.pf-c-skeleton--pf-c-skeleton--after--AnimationIterationCount
infinite
.pf-c-skeleton--pf-c-skeleton--after--AnimationTimingFunction
linear
.pf-c-skeleton--pf-c-skeleton--after--AnimationDelay
.5s
.pf-c-skeleton--pf-c-skeleton--m-circle--BorderRadius
30em
.pf-c-skeleton--pf-c-skeleton--m-circle--before--PaddingBottom
100%
.pf-c-skeleton--pf-c-skeleton--m-text-4xl--Height
calc(2.25rem * 1.3)
.pf-c-skeleton--pf-c-skeleton--m-text-3xl--Height
calc(1.75rem * 1.3)
.pf-c-skeleton--pf-c-skeleton--m-text-2xl--Height
calc(1.5rem * 1.3)
.pf-c-skeleton--pf-c-skeleton--m-text-xl--Height
calc(1.25rem * 1.3)
.pf-c-skeleton--pf-c-skeleton--m-text-lg--Height
calc(1.125rem * 1.5)
.pf-c-skeleton--pf-c-skeleton--m-text-md--Height
calc(1rem * 1.5)
.pf-c-skeleton--pf-c-skeleton--m-text-sm--Height
calc(0.875rem * 1.5)
.pf-c-skeleton--pf-c-skeleton--m-width-sm--Width
6.25rem
.pf-c-skeleton--pf-c-skeleton--m-width-md--Width
12.5rem
.pf-c-skeleton--pf-c-skeleton--m-width-lg--Width
18.75rem
.pf-c-skeleton--pf-c-skeleton--m-width-25--Width
25%
.pf-c-skeleton--pf-c-skeleton--m-width-33--Width
calc(100% / 3)
.pf-c-skeleton--pf-c-skeleton--m-width-50--Width
50%
.pf-c-skeleton--pf-c-skeleton--m-width-66--Width
calc(100% / 3 * 2)
.pf-c-skeleton--pf-c-skeleton--m-width-75--Width
75%
.pf-c-skeleton--pf-c-skeleton--m-height-sm--Height
6.25rem
.pf-c-skeleton--pf-c-skeleton--m-height-md--Height
12.5rem
.pf-c-skeleton--pf-c-skeleton--m-height-lg--Height
18.75rem
.pf-c-skeleton--pf-c-skeleton--m-height-25--Height
25%
.pf-c-skeleton--pf-c-skeleton--m-height-33--Height
calc(100% / 3)
.pf-c-skeleton--pf-c-skeleton--m-height-50--Height
50%
.pf-c-skeleton--pf-c-skeleton--m-height-66--Height
calc(100% / 3 * 2)
.pf-c-skeleton--pf-c-skeleton--m-height-75--Height
75%
.pf-c-skeleton--pf-c-skeleton--m-height-100--Height
100%
.pf-c-skeleton.pf-m-circle--pf-c-skeleton--BorderRadius
30em
.pf-c-skeleton.pf-m-square--pf-c-skeleton--before--Height
0
.pf-c-skeleton.pf-m-square--pf-c-skeleton--before--PaddingBottom
100%
.pf-c-skeleton.pf-m-width-sm--pf-c-skeleton--Width
6.25rem
.pf-c-skeleton.pf-m-width-md--pf-c-skeleton--Width
12.5rem
.pf-c-skeleton.pf-m-width-lg--pf-c-skeleton--Width
18.75rem
.pf-c-skeleton.pf-m-width-25--pf-c-skeleton--Width
25%
.pf-c-skeleton.pf-m-width-33--pf-c-skeleton--Width
calc(100% / 3)
.pf-c-skeleton.pf-m-width-50--pf-c-skeleton--Width
50%
.pf-c-skeleton.pf-m-width-66--pf-c-skeleton--Width
calc(100% / 3 * 2)
.pf-c-skeleton.pf-m-width-75--pf-c-skeleton--Width
75%
.pf-c-skeleton.pf-m-height-sm--pf-c-skeleton--Height
6.25rem
.pf-c-skeleton.pf-m-height-md--pf-c-skeleton--Height
12.5rem
.pf-c-skeleton.pf-m-height-lg--pf-c-skeleton--Height
18.75rem
.pf-c-skeleton.pf-m-height-25--pf-c-skeleton--Height
25%
.pf-c-skeleton.pf-m-height-33--pf-c-skeleton--Height
calc(100% / 3)
.pf-c-skeleton.pf-m-height-50--pf-c-skeleton--Height
50%
.pf-c-skeleton.pf-m-height-66--pf-c-skeleton--Height
calc(100% / 3 * 2)
.pf-c-skeleton.pf-m-height-75--pf-c-skeleton--Height
75%
.pf-c-skeleton.pf-m-height-100--pf-c-skeleton--Height
100%
.pf-c-skeleton.pf-m-text-4xl--pf-c-skeleton--Height
calc(2.25rem * 1.3)
.pf-c-skeleton.pf-m-text-3xl--pf-c-skeleton--Height
calc(1.75rem * 1.3)
.pf-c-skeleton.pf-m-text-2xl--pf-c-skeleton--Height
calc(1.5rem * 1.3)
.pf-c-skeleton.pf-m-text-xl--pf-c-skeleton--Height
calc(1.25rem * 1.3)
.pf-c-skeleton.pf-m-text-lg--pf-c-skeleton--Height
calc(1.125rem * 1.5)
.pf-c-skeleton.pf-m-text-md--pf-c-skeleton--Height
calc(1rem * 1.5)
.pf-c-skeleton.pf-m-text-sm--pf-c-skeleton--Height
calc(0.875rem * 1.5)

View source on GitHub