J3W1 / DESIGN SYSTEM
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 · 1.1.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@1.1.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@1.1.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
Purpose
Marks the moment between a request and its result when there is nothing to measure: a list that is being fetched, a field that is being validated. The theme has no spinner; the same static ⋯ glyph that a loading control shows appears here beside a worded label, and the container says it is busy.
Anatomy
The busy container; the glyph in color.text.muted; the label in
color.text.default. Inline, the two follow the text they qualify; as a
block, they sit centred on color.surface.default 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: there is nothing to reduce | prefers-reduced-motion |
The indicator has no hover, focus or disabled state; it is not a control.
Keyboard
None. The indicator is never focusable. When loading replaces content that had focus, focus moves to the container’s heading or to the indicator’s parent region, never to the indicator itself, and returns to the result when it arrives.
Accessibility
The container is role="status" with aria-busy="true" while loading, so
assistive technology can wait for the subtree to settle and announce the
label once. The glyph is aria-hidden; the label is a real sentence with the
object named (“Loading fonts”) and is visible in both variants; a host that
must hide it inline keeps it visually hidden, never absent. Because nothing moves, there is no
prefers-reduced-motion branch to get wrong. Contrast: label 8.65:1 on the
canvas and 8.43:1 on the panel surface; glyph 5.81:1 and 5.66:1.
Portability
Text only. Toolkits with a spinner widget do not use it; the glyph and label are a plain label. Hosts that insist on an activity indicator record the deviation and keep it under 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 that blocks input for a fetch. A glyph with no label. An indicator that takes focus. A dimmed container at reduced opacity.