skeleton loading page sidebar article skeleton page loading article sidebar placeholder full page skeleton loader content page loading placeholder
Skeleton Content Page
Fetch pattern JSON:
curl https://webspire.de/patterns/skeleton/content-page.json content-page.html
<style>
.ws-skeleton-content-page {
--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-content-page {
--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-content-page [data-shimmer] {
animation: none !important;
}
}
</style>
<div class="ws-skeleton-content-page" role="status" aria-hidden="true">
<span class="sr-only">Loading content page...</span>
<div class="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
<div class="grid gap-6 lg:grid-cols-[1fr_320px]">
<div class="space-y-6">
<div class="rounded-3xl border border-[var(--ws-skeleton-border)] p-6">
<div data-shimmer class="h-5 w-28 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="mt-4 h-10 w-3/4 rounded-2xl" 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="mt-3 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="mt-2 h-4 w-5/6 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 class="rounded-3xl border border-[var(--ws-skeleton-border)] p-6">
<div data-shimmer class="h-56 w-full rounded-2xl" 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 class="mt-6 space-y-3">
<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-11/12 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-10/12 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>
<aside class="space-y-6">
<div class="rounded-3xl border border-[var(--ws-skeleton-border)] p-6">
<div data-shimmer class="h-5 w-24 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 class="mt-4 space-y-3">
<div data-shimmer class="h-12 w-full rounded-2xl" 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-12 w-full rounded-2xl" 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 class="rounded-3xl border border-[var(--ws-skeleton-border)] p-6">
<div data-shimmer class="h-5 w-20 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 class="mt-4 space-y-4">
<div class="flex items-center gap-3">
<div data-shimmer class="h-10 w-10 rounded-full" 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 class="flex-1 space-y-2">
<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>
</div>
<div class="flex items-center gap-3">
<div data-shimmer class="h-10 w-10 rounded-full" 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 class="flex-1 space-y-2">
<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/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>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
skeletonloadingpagesidebararticle
Slots
| Name | Required | Description |
|---|---|---|
| hero | Yes | Header placeholder with title and intro lines. |
| content | Yes | Main content blocks and media placeholder. |
| sidebar | No | Supporting rail placeholders. |
Extended skeleton state for full-page loading. Covers title, hero media, content blocks, and a supporting sidebar so the loading experience better matches the final page structure.