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-progress

Determinate progress indicator. Track + fill bar with the current value as a percentage of (max − min). indeterminate animates a sliding ribbon for known-progress- but-unknown-percent waits. For "system busy" without progress info, prefer <hp-spinner>.

Examples API Intent Changelog
<body> <hp-progress value="25"></hp-progress> <hp-progress value="60"></hp-progress> <hp-progress value="90"></hp-progress> <hp-progress value="100"></hp-progress> </body>
<body> <hp-progress value="70"></hp-progress> <hp-progress value="70" tone="positive"></hp-progress> <hp-progress value="70" tone="warn"></hp-progress> <hp-progress value="70" tone="alert"></hp-progress> <hp-progress value="70" tone="error"></hp-progress> </body> <body> <hp-progress indeterminate></hp-progress> </body>

Install

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

Properties

Property Attribute Type Default Description
min min number 0 Lower bound. Default 0.
max max number 100 Upper bound. Default 100.
value value number 0 Current value. Clamped to [min, max]. Ignored when `indeterminate` is set.
indeterminate indeterminate boolean false Indeterminate mode — animates a sliding ribbon, hides the numeric value from assistive tech. Use when progress is knowable but a specific number isn't available.
tone tone HpProgressTone "neutral" Semantic tone for the fill — neutral (primary), positive, warn, alert, error.

CSS Parts

Part Description
track The track that the fill sits inside
fill The filled portion (or sliding ribbon when indeterminate)

Accessibility

role="progressbar" with aria-valuemin / max / now. indeterminate drops aria-valuenow so assistive tech reports progress as "in progress" without a misleading number.

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close