Experiment #009

Skeleton Loader

Each placeholder block clips an absolutely positioned gradient that translates from -100% to 100% on a 1.8s loop — transform only, so nothing repaints and no background-position is animated. Under prefers-reduced-motion the sweep is removed and the blocks fall back to a gentle opacity pulse. The decorative blocks sit inside an aria-hidden wrapper while a role="status" container with an sr-only "Loading" label announces the state to screen readers.

Scene

Experiment: FX-009
Category: Loaders
Stack: Tailwind + CSS
Difficulty: Beginner
Dependencies: none
Weight: HTML 2.2 KB · CSS 3.1 KB
Added: 2026-08-28
Updated: 2026-08-28
Tags: #skeleton #loading #shimmer #placeholder

Lab notes

Match the bone widths and heights to the real content they stand in for — the whole point of a skeleton is zero layout shift when data lands. Keep the sweep gradient at low alpha (strong highlights read as glitches, not loading). For a list of cards, stagger them with a small animation-delay per item so the sweeps do not fire in lockstep.

Take the code

HTML — code.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<!-- Skeleton Loader — Tailwind + CSS -->
<style>
    /*
     * Shimmer sweep: each bone clips a gradient that translates across it.
     * Transform-only animation — no background-position, no repaints.
     */
    .skeleton-bone {
        position: relative;
        overflow: hidden;
    }

    .skeleton-bone::after {
        content: '';
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(
            90deg,
            transparent,
            var(--skeleton-shimmer, rgb(255 255 255 / 0.7)),
            transparent
        );
        animation: skeleton-shimmer 1.8s ease-in-out infinite;
    }

    @keyframes skeleton-shimmer {
        100% {
            transform: translateX(100%);
        }
    }

    /* Reduced motion: drop the sweep, pulse opacity instead. */
    @media (prefers-reduced-motion: reduce) {
        .skeleton-bone::after {
            display: none;
        }

        .skeleton-bone {
            animation: skeleton-pulse 1.8s ease-in-out infinite;
        }

        @keyframes skeleton-pulse {
            50% {
                opacity: 0.55;
            }
        }
    }
</style>

<div
    role="status"
    class="w-72 border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900 dark:[--skeleton-shimmer:rgb(255_255_255/0.07)]"
>
    <span class="sr-only">Loading</span>

    <div aria-hidden="true">
        <div class="flex items-center gap-3">
            <div class="skeleton-bone h-12 w-12 shrink-0 rounded-full bg-zinc-200 dark:bg-zinc-700"></div>
            <div class="min-w-0 flex-1 space-y-2">
                <div class="skeleton-bone h-3 w-3/5 rounded-xs bg-zinc-200 dark:bg-zinc-700"></div>
                <div class="skeleton-bone h-3 w-2/5 rounded-xs bg-zinc-200 dark:bg-zinc-700"></div>
            </div>
        </div>

        <div class="mt-5 space-y-2">
            <div class="skeleton-bone h-3 rounded-xs bg-zinc-200 dark:bg-zinc-700"></div>
            <div class="skeleton-bone h-3 w-5/6 rounded-xs bg-zinc-200 dark:bg-zinc-700"></div>
            <div class="skeleton-bone h-3 w-2/3 rounded-xs bg-zinc-200 dark:bg-zinc-700"></div>
        </div>
    </div>
</div>

<!-- Skeleton Loader — Tailwind + CSS -->
<style>
    /*
     * Shimmer sweep: each bone clips a gradient that translates across it.
     * Transform-only animation — no background-position, no repaints.
     */
    .skeleton-bone {
        position: relative;
        overflow: hidden;
    }

    .skeleton-bone::after {
        content: '';
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(
            90deg,
            transparent,
            var(--skeleton-shimmer, rgb(255 255 255 / 0.7)),
            transparent
        );
        animation: skeleton-shimmer 1.8s ease-in-out infinite;
    }

    @keyframes skeleton-shimmer {
        100% {
            transform: translateX(100%);
        }
    }

    /* Reduced motion: drop the sweep, pulse opacity instead. */
    @media (prefers-reduced-motion: reduce) {
        .skeleton-bone::after {
            display: none;
        }

        .skeleton-bone {
            animation: skeleton-pulse 1.8s ease-in-out infinite;
        }

        @keyframes skeleton-pulse {
            50% {
                opacity: 0.55;
            }
        }
    }
</style>

<div
    role="status"
    class="w-72 border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900 dark:[--skeleton-shimmer:rgb(255_255_255/0.07)]"
>
    <span class="sr-only">Loading</span>

    <div aria-hidden="true">
        <div class="flex items-center gap-3">
            <div class="skeleton-bone h-12 w-12 shrink-0 rounded-full bg-zinc-200 dark:bg-zinc-700"></div>
            <div class="min-w-0 flex-1 space-y-2">
                <div class="skeleton-bone h-3 w-3/5 rounded-xs bg-zinc-200 dark:bg-zinc-700"></div>
                <div class="skeleton-bone h-3 w-2/5 rounded-xs bg-zinc-200 dark:bg-zinc-700"></div>
            </div>
        </div>

        <div class="mt-5 space-y-2">
            <div class="skeleton-bone h-3 rounded-xs bg-zinc-200 dark:bg-zinc-700"></div>
            <div class="skeleton-bone h-3 w-5/6 rounded-xs bg-zinc-200 dark:bg-zinc-700"></div>
            <div class="skeleton-bone h-3 w-2/3 rounded-xs bg-zinc-200 dark:bg-zinc-700"></div>
        </div>
    </div>
</div>

CSS — styles.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

/*
 * Skeleton Loader — vanilla CSS (no Tailwind)
 *
 * Markup:
 *
 * <div class="skeleton-card" role="status">
 *     <span class="skeleton-sr-only">Loading</span>
 *     <div aria-hidden="true">
 *         <div class="skeleton-header">
 *             <div class="skeleton-bone skeleton-avatar"></div>
 *             <div class="skeleton-meta">
 *                 <div class="skeleton-bone skeleton-line" style="width: 60%"></div>
 *                 <div class="skeleton-bone skeleton-line" style="width: 40%"></div>
 *             </div>
 *         </div>
 *         <div class="skeleton-lines">
 *             <div class="skeleton-bone skeleton-line"></div>
 *             <div class="skeleton-bone skeleton-line" style="width: 83%"></div>
 *             <div class="skeleton-bone skeleton-line" style="width: 66%"></div>
 *         </div>
 *     </div>
 * </div>
 */

.skeleton-card {
    --skeleton-surface: #ffffff;
    --skeleton-border: #e4e4e7;
    --skeleton-bone: #e4e4e7;
    --skeleton-shimmer: rgb(255 255 255 / 0.7);

    width: 18rem;
    padding: 1rem;
    border: 1px solid var(--skeleton-border);
    background-color: var(--skeleton-surface);
}

@media (prefers-color-scheme: dark) {
    .skeleton-card {
        --skeleton-surface: #18181b;
        --skeleton-border: #3f3f46;
        --skeleton-bone: #3f3f46;
        --skeleton-shimmer: rgb(255 255 255 / 0.07);
    }
}

.skeleton-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.skeleton-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-lines {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/*
 * Shimmer sweep: each bone clips a gradient that translates across it.
 * Transform-only animation — no background-position, no repaints.
 */
.skeleton-bone {
    position: relative;
    overflow: hidden;
    background-color: var(--skeleton-bone);
}

.skeleton-avatar {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 9999px;
}

.skeleton-line {
    height: 0.75rem;
    border-radius: 2px;
}

.skeleton-bone::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        transparent,
        var(--skeleton-shimmer),
        transparent
    );
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Reduced motion: drop the sweep, pulse opacity instead. */
@media (prefers-reduced-motion: reduce) {
    .skeleton-bone::after {
        display: none;
    }

    .skeleton-bone {
        animation: skeleton-pulse 1.8s ease-in-out infinite;
    }

    @keyframes skeleton-pulse {
        50% {
            opacity: 0.55;
        }
    }
}

/* Visually hidden, still announced by screen readers. */
.skeleton-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * Skeleton Loader — vanilla CSS (no Tailwind)
 *
 * Markup:
 *
 * <div class="skeleton-card" role="status">
 *     <span class="skeleton-sr-only">Loading</span>
 *     <div aria-hidden="true">
 *         <div class="skeleton-header">
 *             <div class="skeleton-bone skeleton-avatar"></div>
 *             <div class="skeleton-meta">
 *                 <div class="skeleton-bone skeleton-line" style="width: 60%"></div>
 *                 <div class="skeleton-bone skeleton-line" style="width: 40%"></div>
 *             </div>
 *         </div>
 *         <div class="skeleton-lines">
 *             <div class="skeleton-bone skeleton-line"></div>
 *             <div class="skeleton-bone skeleton-line" style="width: 83%"></div>
 *             <div class="skeleton-bone skeleton-line" style="width: 66%"></div>
 *         </div>
 *     </div>
 * </div>
 */

.skeleton-card {
    --skeleton-surface: #ffffff;
    --skeleton-border: #e4e4e7;
    --skeleton-bone: #e4e4e7;
    --skeleton-shimmer: rgb(255 255 255 / 0.7);

    width: 18rem;
    padding: 1rem;
    border: 1px solid var(--skeleton-border);
    background-color: var(--skeleton-surface);
}

@media (prefers-color-scheme: dark) {
    .skeleton-card {
        --skeleton-surface: #18181b;
        --skeleton-border: #3f3f46;
        --skeleton-bone: #3f3f46;
        --skeleton-shimmer: rgb(255 255 255 / 0.07);
    }
}

.skeleton-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.skeleton-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-lines {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/*
 * Shimmer sweep: each bone clips a gradient that translates across it.
 * Transform-only animation — no background-position, no repaints.
 */
.skeleton-bone {
    position: relative;
    overflow: hidden;
    background-color: var(--skeleton-bone);
}

.skeleton-avatar {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 9999px;
}

.skeleton-line {
    height: 0.75rem;
    border-radius: 2px;
}

.skeleton-bone::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        transparent,
        var(--skeleton-shimmer),
        transparent
    );
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Reduced motion: drop the sweep, pulse opacity instead. */
@media (prefers-reduced-motion: reduce) {
    .skeleton-bone::after {
        display: none;
    }

    .skeleton-bone {
        animation: skeleton-pulse 1.8s ease-in-out infinite;
    }

    @keyframes skeleton-pulse {
        50% {
            opacity: 0.55;
        }
    }
}

/* Visually hidden, still announced by screen readers. */
.skeleton-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

Skeleton Loader

Technical details

Take the code