Hexpunk
InstallConceptsElementsProsehp-cellhp-codehp-copyhp-hexhp-latexhp-visually-hiddenhp-buttonhp-checkboxhp-formhp-labelhp-radiohp-selecthp-sliderhp-togglehp-toggle-grouphp-badgehp-taghp-progresshp-spinnerhp-backgroundhp-clusterhp-collapsiblehp-demohp-gridhp-scroll-areahp-separatorhp-sidebarhp-toolbarhp-avatarhp-iconhp-pixelhp-linkhp-menubarhp-navigation-menuhp-tabshp-alert-dialoghp-context-menuhp-dialoghp-dropdown-menuhp-hover-cardhp-popoverhp-tooltiphp-bannerhp-toasthp-tetherhp-module-handlehp-unfold-listhp-unfold-overlayhp-unfold-pagehp-bondhp-link-nodePaletteAnimationsReleases

hp-spinner

Indeterminate-progress spinner — a hex outline rotating at a constant rate. Default tone is --hp-primary ("system busy"); pair with tone="positive|warn|alert|error" when the wait is tone-specific. Respects prefers-reduced-motion by slowing the rotation (rather than freezing it) so the visual still reads alive.

Examples API Intent Changelog <body> <hp-spinner size="sm"></hp-spinner> <hp-spinner size="md"></hp-spinner> <hp-spinner size="lg"></hp-spinner> </body> <body> <hp-spinner></hp-spinner> <hp-spinner tone="positive"></hp-spinner> <hp-spinner tone="warn"></hp-spinner> <hp-spinner tone="alert"></hp-spinner> <hp-spinner tone="error"></hp-spinner> </body>

Install

bun add @hexpunk/core lit
import "@hexpunk/core";

Properties

Property Attribute Type Default Description
size size "sm" | "md" | "lg" "md" Cluster size — `sm` (7 hexes inline), `md` (19 hexes default), `lg` (37 hexes full-page).
tone tone HpSpinnerTone "neutral" Semantic tone. Default `neutral` reads as --hp-primary ("system busy"); others map to the matching tone stroke.

When to use

Use for indeterminate waits — the system doesn't know how long until done. For determinate progress (download, upload, multi-step task) reach for a dedicated progress component instead. Match tone to the operation's outcome / severity (positive for a sync, warn for a check, alert / error for retries against failing endpoints). Stack multiple spinners on the same surface — at most one per region.

Accessibility

Auto role="status" and aria-label="Loading" so screen readers announce the spinner as a live region. Override aria-label for context- specific waits ("Syncing changes", "Compiling shaders", etc.).

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close