Skip to content
STYLESCAPE

Skeleton

Examples for the ss-c-skeleton module: loading placeholders for htmx swaps and lazy panels. Mark the loading region aria-busy="true" and hide the skeletons with aria-hidden="true". The shimmer stops under prefers-reduced-motion.

Shapes

HTML 
<div aria-busy="true" style="display: grid; gap: 1rem; max-width: 32rem">
            <span class="ss-c-skeleton ss-c-skeleton--line" style="--ss-skeleton-width: 40%" aria-hidden="true"></span>
            <span class="ss-c-skeleton ss-c-skeleton--text" aria-hidden="true"></span>
            <span class="ss-c-skeleton ss-c-skeleton--block" aria-hidden="true"></span>
            <span class="ss-c-skeleton ss-c-skeleton--avatar" aria-hidden="true"></span>
        </div>

Card placeholder

HTML 
<article aria-busy="true" aria-label="Loading contact" style="display: flex; gap: 1rem; align-items: flex-start; max-width: 28rem">
            <span class="ss-c-skeleton ss-c-skeleton--avatar" style="--ss-skeleton-width: 3rem; --ss-skeleton-height: 3rem" aria-hidden="true"></span>
            <div style="flex: 1">
                <span class="ss-c-skeleton ss-c-skeleton--line" style="--ss-skeleton-width: 60%" aria-hidden="true"></span>
                <span class="ss-c-skeleton ss-c-skeleton--text" style="--ss-skeleton-lines: 2" aria-hidden="true"></span>
            </div>
        </article>

Table rows

Recent surveys (loading)
NameResponsesUpdated
HTML 
<table class="ss-c-table" aria-busy="true">
            <caption>Recent surveys (loading)</caption>
            <thead><tr><th scope="col">Name</th><th scope="col">Responses</th><th scope="col">Updated</th></tr></thead>
            <tbody>
                <tr><td><span class="ss-c-skeleton ss-c-skeleton--line" aria-hidden="true"></span></td><td><span class="ss-c-skeleton ss-c-skeleton--line" style="--ss-skeleton-width: 3rem" aria-hidden="true"></span></td><td><span class="ss-c-skeleton ss-c-skeleton--line" style="--ss-skeleton-width: 6rem" aria-hidden="true"></span></td></tr>
                <tr><td><span class="ss-c-skeleton ss-c-skeleton--line" style="--ss-skeleton-width: 70%" aria-hidden="true"></span></td><td><span class="ss-c-skeleton ss-c-skeleton--line" style="--ss-skeleton-width: 2rem" aria-hidden="true"></span></td><td><span class="ss-c-skeleton ss-c-skeleton--line" style="--ss-skeleton-width: 6rem" aria-hidden="true"></span></td></tr>
            </tbody>
        </table>