Table Skeleton: Pure CSS Loading Animation

Table Skeleton

A data table placeholder with a header, checkboxes, names, status pills and right-aligned amounts. Each cell brightens on a delay of row plus column, so a diagonal wave rolls across the grid.

Also known as: data table skeleton, table loading placeholder, table rows skeleton.

Color Size 64px Dark background

HTML

<div class="ldr-skeleton-table" role="status" aria-label="Loading content">
  <div class="ldr-skeleton-table-head"><span></span><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-table-row"><span></span><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-table-row"><span></span><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-table-row"><span></span><span></span><span></span><span></span></div>
  <div class="ldr-skeleton-table-row"><span></span><span></span><span></span><span></span></div>
</div>

CSS

.ldr-skeleton-table {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 7);
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent);
  border-radius: calc(var(--s) / 7);
  overflow: hidden;
}
.ldr-skeleton-table > div {
  --y: 0;
  display: grid;
  grid-template-columns: calc(var(--s) * 0.3) 2.2fr 1fr 1fr;
  align-items: center;
  gap: calc(var(--s) / 3);
  height: calc(var(--s) * 0.56);
  padding: 0 calc(var(--s) / 4);
}
.ldr-skeleton-table-head { background: color-mix(in srgb, var(--ldr-color, #3b82f6) 8%, transparent); }
.ldr-skeleton-table-row { border-top: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 12%, transparent); }
.ldr-skeleton-table > div:nth-child(2) { --y: 1; }
.ldr-skeleton-table > div:nth-child(3) { --y: 2; }
.ldr-skeleton-table > div:nth-child(4) { --y: 3; }
.ldr-skeleton-table > div:nth-child(5) { --y: 4; }
.ldr-skeleton-table > div > span {
  --x: 0;
  height: calc(var(--s) / 6);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 34%, transparent);
  animation: ldr-skeleton-table-wave 1.6s ease-in-out calc((var(--x) + var(--y)) * 0.09s) infinite backwards;
}
.ldr-skeleton-table > div > span:nth-child(1) {
  height: calc(var(--s) * 0.3);
  border-radius: calc(var(--s) / 14);
  background: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
}
.ldr-skeleton-table > div > span:nth-child(2) { --x: 1; width: 78%; }
.ldr-skeleton-table > div > span:nth-child(3) { --x: 2; width: 80%; height: calc(var(--s) / 3.6); }
.ldr-skeleton-table > div > span:nth-child(4) { --x: 3; width: 64%; justify-self: end; }
.ldr-skeleton-table-row:nth-child(odd) > span:nth-child(2) { width: 58%; }
.ldr-skeleton-table-row:nth-child(3) > span:nth-child(4) { width: 82%; }
.ldr-skeleton-table-head > span:nth-child(n + 2) {
  width: 44%;
  height: calc(var(--s) / 7);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 42%, transparent);
}
.ldr-skeleton-table-head > span:nth-child(4) { justify-self: end; }
@keyframes ldr-skeleton-table-wave {
  0%, 100% { opacity: 0.45; }
  35%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-skeleton-table, .ldr-skeleton-table *, .ldr-skeleton-table::before, .ldr-skeleton-table::after, .ldr-skeleton-table *::before, .ldr-skeleton-table *::after {
    animation-duration: 3s;
  }
}

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Table Skeleton

HTML

CSS

Customizing this loader

Similar loaders