Skeleton Table — Free HTML CSS JS Loader Snippet

Skeleton screens beat spinners for data tables because they preserve layout: the user sees the table's shape immediately, and when data arrives nothing jumps. The catch is that a table skeleton only works if the placeholder rows genuinely match the real rows — same columns, same cell heights, same visual weight. This component builds that properly in HTML, CSS, and vanilla JavaScript: shimmering bone placeholders shaped like the final avatar, text, and status-pill content, an aria-busy accessibility contract, and a staggered fade-in when real rows replace the bones.

One bone primitive, many shapes

Everything skeletal is a single .skt-bone class — an inline-block with a three-stop grey linear-gradient whose background-size is 400% width, animated by sliding background-position from one end to the other. Because the gradient is wider than the element, a soft highlight band appears to sweep across each bone. Width, height, and border-radius are then overridden per use: a 32px circle for the avatar, a 999px-radius lozenge for the status pill, and various text bars. One keyframe animation serves every bone, and since all bones share the same duration and timing, the shimmer sweeps the whole table in unison — the coordinated look users recognise from Facebook and LinkedIn.

Skeleton rows that mirror real rows

skeletonRow() emits the exact same <tr>/<td> structure as realRow() — the same .skt-user flex layout in the name cell, the same right-aligned last column — with bones sized like the content they stand in for. Two widths are derived from the row index (90 + (i % 3) * 18) so consecutive rows differ slightly; identical stamped rows are the tell that makes skeletons look fake. Because both renderers agree on structure, the swap to real data cannot shift the layout: columns were already at their final widths.

The loading contract: aria-busy

While bones are showing, the table carries aria-busy="true", which tells assistive technology the region is updating and its current content is not meaningful — screen readers won't announce a page full of decorative divs. When the data lands, the attribute flips to false and the real rows are announced normally. The demo also honours prefers-reduced-motion by freezing the shimmer to a flat grey, since large animated regions are a vestibular trigger.

Staggered swap-in

Real rows arrive with a .skt-in class animating a 5px rise-and-fade, each delayed 60ms after the previous via an inline animation-delay. The cascade reads as "data flowing in" rather than a hard cut, the same entrance choreography as the stagger list. A reload button (whose icon spins while loading) restarts the cycle, and the load() function clears any in-flight timer first so rapid clicks cannot queue overlapping swaps.

Where your fetch goes

The 1.8-second setTimeout stands in for a network request. In production, load() becomes: render skeletons, await fetch(), render real rows in the response handler, flip aria-busy. Because skeleton and real rendering are separate pure functions over the same structure, wiring a real API changes one line. If your row count is unknown ahead of time, render 5–8 skeleton rows — enough to fill the visible area without implying a precise count.

Customisation

Adjust the bone gradient greys for dark mode (dark base, slightly lighter sweep), tune the 1.4s shimmer, and extend the row templates to your columns — every new cell just needs a matching bone. For whole-page loading states, combine with the skeleton dashboard and skeleton card grid variants.