Components / Base / Skeleton
B8 · Base
Skeleton
Still bars in the track colour, with a sentence that names what is loading.
<div class="c-skel" aria-hidden="true"><span></span><span class="short"></span></div>
<p class="sub">Loading the example register.</p>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A region is waiting on data.
- The final layout is roughly known.
When not to use
- The wait is a single action with a known result. Leave the button as it is.
- You would animate the bars. They stay still.
Usage
<div class="c-skel" aria-hidden="true"><span></span><span class="short"></span></div>
<p class="sub">Loading the example register.</p>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| c-skel span | element | — | A track-coloured bar. |
| short / mid | class | full width | Shorter bars. |
| sentence | text | — | What is loading. Not aria-hidden. |
Keyboard
| Key | Action |
|---|---|
| Tab | Skips the bars. They are aria-hidden. |
Accessibility
- Bars are hidden from assistive tech.
- The sentence is the loading status.
- No spinner.
Motion
- Nothing animates at rest. No shimmer.
Pattern origin
Base loading state. Bars do not shimmer.