1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
id: Skeleton
section: components
cssPrefix: pf-v6-c-skeleton
---import './Skeleton.css'
## Examples
### Default
```html
<div class="pf-v6-c-skeleton">
<span class="pf-v6-screen-reader">Loading default content</span>
</div>
```
### Percentage width modifiers
```html
<div class="pf-v6-c-skeleton pf-m-width-25">
<span class="pf-v6-screen-reader">Loading percentage with modifiers content</span>
</div>
<br />
<div class="pf-v6-c-skeleton pf-m-width-33"></div>
<br />
<div class="pf-v6-c-skeleton pf-m-width-50"></div>
<br />
<div class="pf-v6-c-skeleton pf-m-width-66"></div>
<br />
<div class="pf-v6-c-skeleton pf-m-width-75"></div>
<br />
<div class="pf-v6-c-skeleton"></div>
```
### Percentage height modifiers
```html
<div class="pf-v6-c-skeleton pf-m-height-25">
<span class="pf-v6-screen-reader">Loading percentage height modifiers content</span>
</div>
<div class="pf-v6-c-skeleton pf-m-height-33"></div>
<div class="pf-v6-c-skeleton pf-m-height-50"></div>
<div class="pf-v6-c-skeleton pf-m-height-66"></div>
<div class="pf-v6-c-skeleton pf-m-height-75"></div>
<div class="pf-v6-c-skeleton pf-m-height-100"></div>
```
### Text modifiers
```html
--pf-v6-global--FontSize--4xl
<div class="pf-v6-c-skeleton pf-m-text-4xl">
<span class="pf-v6-screen-reader">Loading text modifiers content</span>
</div>
<br />--pf-v6-global--FontSize--3xl
<div class="pf-v6-c-skeleton pf-m-text-3xl"></div>
<br />--pf-v6-global--FontSize--2xl
<div class="pf-v6-c-skeleton pf-m-text-2xl"></div>
<br />--pf-v6-global--FontSize--xl
<div class="pf-v6-c-skeleton pf-m-text-xl"></div>
<br />--pf-v6-global--FontSize--lg
<div class="pf-v6-c-skeleton pf-m-text-lg"></div>
<br />--pf-v6-global--FontSize--md
<div class="pf-v6-c-skeleton pf-m-text-md"></div>
<br />--pf-v6-global--FontSize--sm
<div class="pf-v6-c-skeleton pf-m-text-sm"></div>
```
### Static height width and shape modifiers
```html
Small circle
<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-sm">
<span class="pf-v6-screen-reader">Loading circle content</span>
</div>
<br />Medium circle
<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-md"></div>
<br />Large circle
<div class="pf-v6-c-skeleton pf-m-circle pf-m-width-lg"></div>
<br />Small square
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-sm">
<span class="pf-v6-screen-reader">Loading square content</span>
</div>
<br />Medium square
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
<br />Large square
<div class="pf-v6-c-skeleton pf-m-square pf-m-width-lg"></div>
<br />Small rectangle
<div class="pf-v6-c-skeleton pf-m-height-sm pf-m-width-md">
<span class="pf-v6-screen-reader">Loading rectangle content</span>
</div>
<br />Medium rectangle
<div class="pf-v6-c-skeleton pf-m-height-md pf-m-width-lg"></div>
<br />Large rectangle
<div class="pf-v6-c-skeleton pf-m-height-lg"></div>
```
## Documentation
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-skeleton` | `<div>` | Initiates the skeleton component. **Required** |
| `.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75]` | `.pf-v6-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-v6-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-v6-c-skeleton` | Modifies the skeleton height to match the height of PatternFly's text elements. |
| `.pf-m-circle` | `.pf-v6-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-v6-c-skeleton` | Modifies the border radius of the skeleton to be a square. Use a width modifier to specify the size. |
|
