Progress Spinner
Metadata
- Component: progress-spinner
- PascalCase: ProgressSpinner
- Description: an indeterminate spinning progress indicator
- HTML tag: <div>
- CSS class: .progress-spinner
- Interactive: no
Key Behaviors
- Renders a
<div>withrole="status"for implicit live region semantics - Uses
aria-live="polite"to ensure screen readers announce the loading state without interruption - Provides
aria-labelfor accessible naming of the loading state - Accepts an optional
childrenslot for content inside (e.g., loading text) - Spreads
restPropsfor consumer customization
ARIA
role="status"-- identifies the element as a status region that receives non-urgent updatesaria-label="..."-- provides an accessible name describing what is loadingaria-live="polite"-- ensures content changes are announced by screen readers at the next opportunity without interrupting
Props
label: string (required) -- accessible name describing the loading state viaaria-labelchildren: slot (default:undefined) -- optional content rendered inside (e.g., "Loading...")...restProps: unknown -- additional attributes spread onto the<div>
Acceptance Criteria
- Renders <div> element with class="progress-spinner"
- Has aria-label attribute
- Has role="status"
- WCAG 2.2 AAA compliant
- Zero CSS — fully headless
References
- Documentation: index.md
- CSS class: .progress-spinner in css-style-sheet-template.css
- HTML headless: public-good-design-system-html-headless/components/progress-spinner.html
- WAI-ARIA
statusrole: https://www.w3.org/WAI/ARIA/apd/roles/status/ - MDN
aria-live: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live