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

Percentage widths






Percentage heights

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

Shapes

Small circle

Medium circle

Large circle

Small square

Medium square

Large square

Small rectangle

Medium rectangle

Large rectangle

Props

Skeleton properties
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.
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