Loaders
Skeleton Loader
Content-shaped placeholders that stand in while data loads.
#skeleton#shimmer#placeholder
6 frameworksBeginner
Loading…
A sweeping bar for work whose length nobody knows.
<!--
INDETERMINATE - the sibling of progress-bar, and the difference is one
attribute:
progress-bar aria-valuenow="43" -> "43% complete"
loader-bar-indeterminate NO aria-valuenow -> "busy, unknown"
Omitting aria-valuenow is not an oversight to be tidied up later. It is the
semantic. A progressbar with no valuenow is defined to mean "in progress,
amount unknown", which is exactly the truth here. Adding a fake number -
aria-valuenow="50" on a bar that has no idea - is worse than useless: the
screen reader states it as fact.
Given that, role="status" with a real sentence is the more useful choice than
role="progressbar" for a bar that will never have a value: "Loading results"
beats "busy". Both are defensible; hardcoding a number is not.
-->
<div class="ind" role="status">
<span class="ind__label">Loading results…</span>
<div class="ind__track" aria-hidden="true">
<div class="ind__fill"></div>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
label | string | 'Loading…' | Accessible label announced while loading. |
className | string | - | Additional classes merged onto the root element. |
The absence of aria-valuenow is the semantic, not an oversight to tidy up later - a progressbar without a value means "in progress, amount unknown", which is the truth here. The segment sweeps clean off the right edge rather than filling, because a bar that fills implies a finish line this component can't promise. The reduced-motion fallback needs care: a 40% stub frozen mid-sweep reads as "40% done", so widen it to the full track instead of merely stopping the animation.