skeleton loader placeholder shimmer loading card skeleton loader placeholder shimmer loading card pulse ghost skeleton loading placeholder card content loader animation
Skeleton Base
Fetch pattern JSON:
curl https://webspire.de/patterns/skeleton/base.json base.html
<style>
.ws-skeleton {
--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 {
--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 [data-shimmer] {
animation: none !important;
}
}
</style>
<div class="ws-skeleton" role="status" aria-hidden="true">
<span class="sr-only">Loading...</span>
<div class="mx-auto max-w-sm overflow-hidden rounded-xl border border-[var(--ws-skeleton-border)] bg-[var(--ws-skeleton-bg)] p-0">
<!-- Image placeholder -->
<div
data-shimmer
class="aspect-[4/3] w-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="space-y-3 p-4">
<!-- Text line 1 -->
<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>
<!-- Text line 2 -->
<div
data-shimmer
class="h-4 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>
<!-- Circle + short line -->
<div class="flex items-center gap-3 pt-2">
<div
data-shimmer
class="h-8 w-8 shrink-0 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
data-shimmer
class="h-3 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>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
skeletonloaderplaceholdershimmerloadingcard
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Loading placeholder content with shimmer elements. |
Card-shaped skeleton loader with a shimmer animation. Includes an image rectangle (aspect 4:3), two text lines of varying widths, and a small avatar circle. Uses aria-hidden="true" and role="status" with sr-only loading text for accessibility. Shimmer animation is disabled when the user prefers reduced motion.