Skeleton Table

Fetch pattern JSON: curl https://webspire.de/patterns/skeleton/table.json
table.html
<style>
.ws-skeleton-table {
  --ws-skeleton-bg: oklch(0.92 0.005 75);
  --ws-skeleton-highlight: oklch(0.96 0.003 75);
  --ws-skeleton-border: oklch(0.88 0.008 75);
}
@media (prefers-color-scheme: dark) {
  .ws-skeleton-table {
    --ws-skeleton-bg: oklch(0.25 0.005 75);
    --ws-skeleton-highlight: oklch(0.32 0.005 75);
    --ws-skeleton-border: oklch(0.30 0.008 75);
  }
}
@keyframes ws-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-skeleton-table [data-shimmer] {
    animation: none !important;
  }
}
</style>

<div class="ws-skeleton-table" role="status" aria-hidden="true">
  <span class="sr-only">Loading...</span>
  <div class="mx-auto max-w-2xl overflow-hidden rounded-xl border border-[var(--ws-skeleton-border)]">
    <!-- Header row -->
    <div class="grid grid-cols-4 gap-4 border-b border-[var(--ws-skeleton-border)] p-4">
      <div data-shimmer class="h-4 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-4 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-4 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-4 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
    </div>
    <!-- Body row 1 -->
    <div class="grid grid-cols-4 gap-4 p-4">
      <div data-shimmer class="h-3.5 w-3/4 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-2/3 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-1/2 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
    </div>
    <!-- Body row 2 -->
    <div class="grid grid-cols-4 gap-4 bg-[var(--ws-skeleton-bg)]/5 p-4">
      <div data-shimmer class="h-3.5 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-2/3 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-3/4 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
    </div>
    <!-- Body row 3 -->
    <div class="grid grid-cols-4 gap-4 p-4">
      <div data-shimmer class="h-3.5 w-2/3 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-3/4 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-1/2 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
    </div>
    <!-- Body row 4 -->
    <div class="grid grid-cols-4 gap-4 bg-[var(--ws-skeleton-bg)]/5 p-4">
      <div data-shimmer class="h-3.5 w-3/4 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-1/2 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-2/3 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
    </div>
    <!-- Body row 5 -->
    <div class="grid grid-cols-4 gap-4 p-4">
      <div data-shimmer class="h-3.5 w-full rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-3/4 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-1/2 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
      <div data-shimmer class="h-3.5 w-3/4 rounded" style="background: linear-gradient(90deg, var(--ws-skeleton-bg) 25%, var(--ws-skeleton-highlight) 50%, var(--ws-skeleton-bg) 75%); background-size: 200% 100%; animation: ws-skeleton-shimmer 1.5s infinite;"></div>
    </div>
  </div>
</div>
Details

Family
skeleton
Tier
enhanced
Kind
component
Extends
skeleton/base
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
skeletontabledataloaderplaceholdershimmerrows
Slots

Name	Required	Description
content	Yes	Table placeholder with header and body row skeletons.
Table skeleton extending the base. Features a header row with 4 cells and 5 body rows, each with 4 cells of varying widths. Alternating rows have a subtle background opacity difference for visual rhythm. Uses the same shimmer animation and accessibility setup as the base skeleton.