x
1
<div style="width: 64px; height: 64px" data-view-component="true" class="SkeletonBox"></div>1
render(Primer::Alpha::SkeletonBox.new(width: width, height: height))No notes provided.
| Param | Description | Input |
|---|---|---|
|
— |
|
|
|
— |
|
app/components/primer/alpha/skeleton_box.css
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
@keyframes shimmer { from { mask-position: 200%; } to { mask-position: 0%; }}.SkeletonBox { display: block; height: 1rem; background-color: var(--bgColor-muted); border-radius: var(--borderRadius-small); animation: shimmer;}@media (prefers-reduced-motion: no-preference) {.SkeletonBox { mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%); mask-size: 200%; animation: shimmer; animation-duration: 1s; animation-iteration-count: infinite;} }@media (forced-colors: active) {.SkeletonBox { outline: 1px solid transparent; outline-offset: -1px;} }