skeleton table data loader placeholder shimmer rows skeleton table data grid rows columns loader placeholder shimmer table skeleton loading placeholder data table loader animation
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
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.