Props
| Prop | Type | Default | Notes |
|---|---|---|---|
tone | '' | neutral | primary | secondary | tertiary | error | neutral | |
value | string | 37 | |
max | string | 100 | |
indeterminate | boolean | false |
StellarUI
<stellar-progress>
Native progress styling with semantic tones and indeterminate animation.
Properties
Preview
Markup
<stellar-progress
value="37"
max="100"
>
</stellar-progress>API
Complete props, events, slots, and implementation notes for the shipped progress bar.
Events
| Event | Source | Notes |
|---|---|---|
| native progress semantics | rendered <progress> | The component is display-only and does not emit interaction events. |
| custom events | none | stellar-progress does not emit custom events. |
Slots
| Slot | Notes |
|---|---|
| none | This component has no slots. It is a thin wrapper around a native <progress> element. |
Notes
- The public tag is `stellar-progress`, backed directly by a native `<progress>` element.
- The shipped surface stays small: tone selection plus `value`, `max`, and explicit `indeterminate` mode.
- When `indeterminate` is true, the component omits the native `value` attribute instead of simulating that state in JavaScript.
- The visual baseline follows the shipped compact 2px-style bar, rounded corners, and striped indeterminate animation.
- The component is display-only and intentionally does not grow button-like states or form-control behavior.