Loading indicator
A static ⋯ glyph with a worded label inside an aria-busy container; inline next to text or as a centred block. There is no spinner.
stable · light DOM · 4.0.0. Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.
Live variants
inline
<j3w1-loading-indicator id="example-loading-indicator-inline"><span class="loading-indicator loading-indicator-inline" role="status" aria-busy="true"><span class="loading-indicator-glyph" aria-hidden="true">⋯</span><span class="loading-indicator-label">Loading fonts</span></span></j3w1-loading-indicator>block
<j3w1-loading-indicator id="example-loading-indicator-block"><div class="loading-indicator loading-indicator-block" role="status" aria-busy="true">
<span class="loading-indicator-glyph" aria-hidden="true">⋯</span>
<span class="loading-indicator-label">Loading the component list</span>
</div></j3w1-loading-indicator>Install and register
Use the exact version. If npm publication is pending, install the release tarball from the installation guide.
npm install --save-exact @j3w1/ui@4.0.0import '@j3w1/ui/tokens.css';
import '@j3w1/ui/styles/loading-indicator.css';
import '@j3w1/ui/register/loading-indicator';Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.
Copy the complete implementation
npx --package=@j3w1/ui@4.0.0 j3w1-ui copy loading-indicator --out ./vendor/j3w1/loading-indicatorThe CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open index.html. Keep its modules, CSS, tokens and licence notices together.
Public API
attributes
| Name | Type / signature | Meaning |
|---|---|---|
disabled | CustomEvent | Disable the native controls owned by this instance. |
loading | CustomEvent | Mark the primary control busy and prevent duplicate activation. |
properties
| Name | Type / signature | Meaning |
|---|---|---|
disabled | boolean | Delegates disabled state to native children. |
name | string | Native control name; application form keys remain explicit. |
methods
| Name | Type / signature | Meaning |
|---|---|---|
refresh | (): void | Reconnect behavior after replacing native child structure. |
focus | (options?: FocusOptions): void | Focus the first usable native control. |
events
| Name | Type / signature | Meaning |
|---|
Dependencies and verification
Registered components: none. Style dependencies: none.
Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. Read specification execution evidence; read packed-consumer evidence; inspect the complete state matrix.
Full implementation manifest, API and token dependency closure
Canonical specification
Loading indicator loading-indicator
A static ⋯ glyph with a worded label inside an aria-busy container; inline next to text or as a centred block. There is no spinner.
Report an issue with this component
Tokens
Focus a role to inspect its values; follow its link for persistent usage and source details.
| Part | Role | Value | Use |
|---|---|---|---|
glyph.text | color.text.mutedapproveduse | #d4868b | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
label.text | color.text.defaultapproveduse | #e99499 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
block.bg | color.surface.defaultapproveduse | #0d0707 | D-041 surface.default: color.primitive.modern.panel. |
block.border | color.border.dividerapproveduse | #482b2b | D-041 border.divider: color.primitive.modern.divider. |
State matrix
Every declared state and combination, statically rendered; the default cell is live. Sizes: compact, comfortable (switch with the density control above).
| State | Inline | Block |
|---|---|---|
default | Loading fonts |
Loading the component list
|
reduced-motion |
Purpose
Marks the wait between a request and its result when there is nothing to measure: a list being fetched, a field being validated. There is no spinner; the static ⋯ a loading control shows appears here beside a worded label.
Anatomy
Inline, glyph and label follow the text they qualify; as a block they sit
centred, inside a color.border.divider edge, where the content will appear.
States
| State | Visual | Non-colour channel |
|---|---|---|
| default | the static ⋯ and the label | aria-busy="true"; the glyph; the worded label |
| reduced-motion | identical: nothing to reduce | prefers-reduced-motion |
Not a control: no hover, focus or disabled state.
Keyboard
Never focusable. When loading replaces content that had focus, focus moves to the container’s heading or parent region, never the indicator, and returns to the result when it arrives.
Accessibility
aria-busy lets assistive technology wait for the subtree to settle and
announce the label once. The label names the object (“Loading fonts”) and is
always visible, inline as in a block; the glyph never appears without it. Nothing
moves, so there is no reduced-motion branch to get wrong. Label and glyph meet
4.5:1.
Portability
Text only; a toolkit’s spinner widget is not used. A host that insists on an activity indicator records the deviation and keeps it within the 150 ms motion budget with a reduced-motion branch.
Non-examples
A spinner or rotating ring. Animated dots. A shimmering skeleton. A full-page overlay blocking input for a fetch. A glyph with no label. An indicator that takes focus. A dimmed, reduced-opacity container.
Contrast report
6 declared pairs measured on resolved sRGB values with the WCAG 2.x formula; 0 waived (decorative only), 0 failing. A pass is a design target for the named role, not an application-wide conformance claim.
| Pair | State | Kind | Foreground | Background | Ratio | Min | Result |
|---|---|---|---|---|---|---|---|
| loading-indicator default text | default | text | color.text.default #e99499 | color.surface.canvas #000000 | 9.16 | 4.5 | pass |
| loading-indicator reduced-motion text | reduced-motion | text | color.text.default #e99499 | color.surface.canvas #000000 | 9.16 | 4.5 | pass |
| glyph on the canvas | — | text | color.text.muted #d4868b | color.surface.canvas #000000 | 7.58 | 4.5 | pass |
| block label on the panel surface | — | text | color.text.default #e99499 | color.surface.default #0d0707 | 8.72 | 4.5 | pass |
| block glyph on the panel surface | — | text | color.text.muted #d4868b | color.surface.default #0d0707 | 7.22 | 4.5 | pass |
| block edge (decorative) | — | ui | color.border.divider #482b2b | color.surface.canvas #000000 | 1.66 | 1 | pass |
Keys
| Key | Action |
|---|---|
| Tab | Nothing; the indicator is not focusable and never traps focus; the content it replaces keeps its tab stops when it returns. |
For agents
Component JSON ·Implementation brief ·Build a task kit ·
Related: progress skeleton empty-state toast
Stress fixtures: FX-320 FX-ZOOM-200 FX-I18N FX-RTL FX-RM FX-HC FX-STATE-MATRIX