Progress Bar
Thin rounded track — single-value fill or a multi-color segmented fill. Used in the
onboarding checklist, the LFD/Demurrage Shield, and inside tip-stat-card.
Selector: tip-progress-bar
API
| Name | Type | Default | Description |
|---|---|---|---|
value (input) |
number | null |
null |
Single fill percentage (0–100). Ignored if segments is set. |
segments (input) |
ProgressBarSegment[] | null = {value, color?}[] |
null |
Multi-color fill; each segment's value is a % width, color overrides the default. |
color (input) |
string |
'var(--tip-emerald-500)' |
Fill color when using value (or as fallback for a segments entry with no color). |
track (input) |
string |
'var(--tip-ink-150)' |
Track (background) color. |
height (input) |
number |
8 |
Track height in px. |
loading (input) |
boolean |
false |
Renders a tip-skeleton pill instead of the track. |
Usage
<tip-progress-bar [value]="onboardingProgress" />
<tip-progress-bar [value]="72" color="var(--tip-gold-500)" />
Notes
segs()resolves precedence: explicitsegmentswins; otherwise a single-segment array is derived fromvalue+color; if neither is set, renders an empty (0-width) track.- Segment width transitions with
width 0.3s ease— no reduced-motion override on this specific transition today (a gap worth checking before adding decorative-only progress animations elsewhere). - Fully token-driven color/track defaults, but every call site can override both — useful for the gold LFD shield vs. the default emerald onboarding bar.