skeleton text paragraph loader placeholder shimmer skeleton text paragraph heading loader placeholder shimmer lines text content skeleton loader paragraph placeholder animation
Skeleton Text
Fetch pattern JSON:
curl https://webspire.de/patterns/skeleton/text.json text.html
<style>
.ws-skeleton-text {
--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-text {
--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-text [data-shimmer] {
animation: none !important;
}
}
</style>
<div class="ws-skeleton-text" role="status" aria-hidden="true">
<span class="sr-only">Loading...</span>
<div class="mx-auto max-w-lg space-y-4">
<!-- Heading skeleton -->
<div
data-shimmer
class="h-6 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>
<!-- Paragraph lines -->
<div class="space-y-2.5 pt-2">
<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-[92%] 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-[78%] 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-[60%] 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
skeletontextparagraphloaderplaceholdershimmer
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Text placeholder lines with shimmer animation. |
Text content skeleton extending the base. Shows a heading skeleton line (wider, taller) followed by five paragraph lines with varying widths (100%, 92%, 100%, 78%, 60%) to simulate realistic text flow. Uses the same shimmer animation and accessibility attributes as the base.