Skip to content
PatternFly logo

Skeleton

A skeleton is a type of loading state that allows you to expose content incrementally. For content that may take a long time to load, use a progress bar in place of a skeleton.

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

Class
Applied to
Outcome
.pf-c-skeleton
<div>
Initiates the skeleton component. Required
.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75]
.pf-c-skeleton
Modifies the width of the skeleton. The default is 100%.
.pf-m-height-[sm, md, lg, 25, 33, 50, 66, 75, 100]
.pf-c-skeleton
Modifies the height of the skeleton. The default is the inherited font size.
.pf-m-text-[sm, md, lg, xl, 2xl, 3xl, 4xl]
.pf-c-skeleton
Modifies the skeleton height to match the height of PatternFly's text elements.
.pf-m-circle
.pf-c-skeleton
Modifies the border radius of the skeleton to be a circle. Use a width modifier to specify the size.
.pf-m-square
.pf-c-skeleton
Modifies 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--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
" "
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientAngle
90deg
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientColorStop1
#f5f5f5
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientColorStop2
#ededed
.pf-c-skeleton--pf-c-skeleton--after--LinearGradientColorStop3
#f5f5f5
.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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines