Primer ViewComponents v0.43.6

Previews

No matching results.

x
1
<div style="width: 64px; height: 64px" data-view-component="true" class="SkeletonBox"></div>
1
render(Primer::Alpha::SkeletonBox.new(width: "64px", height: "64px"))

No notes provided.

No params configured.

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;
}
  }