Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Default -->
<div class="flex items-center gap">
  <div class="skeleton rounded-full" style="height: 3rem; width: 3rem;"></div>
  <div class="flex flex-col gap">
    <div class="skeleton" style="height: 1rem; width: 250px;"></div>
    <div class="skeleton" style="height: 1rem; width: 200px;"></div>
  </div>
</div>
<!-- Card -->
<div class="flex flex-col items-start gap">
  <div class="skeleton rounded-lg" style="height: 125px; width: 250px;"></div>
  <div class="flex flex-col gap-half">
    <div class="skeleton" style="height: 1rem; width: 250px;"></div>
    <div class="skeleton" style="height: 1rem; width: 200px;"></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%# Default %>
<div class="flex items-center gap">
  <div class="skeleton rounded-full" style="height: 3rem; width: 3rem;"></div>
  <div class="flex flex-col gap">
    <div class="skeleton" style="height: 1rem; width: 250px;"></div>
    <div class="skeleton" style="height: 1rem; width: 200px;"></div>
  </div>
</div>
<%# Card %>
<div class="flex flex-col items-start gap">
  <div class="skeleton rounded-lg" style="height: 125px; width: 250px;"></div>
  <div class="flex flex-col gap-half">
    <div class="skeleton" style="height: 1rem; width: 250px;"></div>
    <div class="skeleton" style="height: 1rem; width: 200px;"></div>
  </div>
</div>
1
2
3
4
5
.skeleton {
  animation: var(--animate-blink);
  border-radius: var(--rounded-md);
  background-color: var(--color-border-light);
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.