Empty & loading states

The states most interfaces forget. This screen lays the async lifecycle side by side: a skeleton placeholder while content loads, an empty state when there's nothing yet, a spinner and progress bars for work in flight, a banner for standing notices, and a toast for transient feedback (press the button to fire one).

Preview full screen

Use it

This example is one self-contained file. Link the JLDS stylesheets and the behavior bundle from the CDN, then paste the markup. See Vanilla HTML for the full workflow.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/all.css">
<script src="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/js/all.js" defer></script>

curl -O https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/examples/empty-states.html

Components used

Skeleton · Empty State · Spinner · Progress · Banner · Toast · Card · Button