| State |
Support |
Visual change |
Tokens |
| Default |
Yes |
Layer track, brand fill |
color-surface-layer-2, color-status-brand-emphasis |
| Tone: neutral, success, warning, danger |
Yes |
The fill colour changes |
color-status-neutral-emphasis, color-status-success-emphasis, color-status-warning-emphasis, color-status-danger-emphasis |
| Value changes |
Yes |
The fill scales to its new length over 150 ms |
motion-progress-duration |
| Forced colours |
Yes |
The track gets a 1 px system outline, the fill the system highlight colour |
- |
| Hover, pressed, focus |
No |
Static; it has no interactive part |
- |
| Disabled |
No |
It has no disabled state |
- |
| Loading, error |
Composition |
Replace with Skeleton or an error component |
- |
| Property |
Value |
Token |
Track height, md |
8 px |
meter-height-md |
Track height, sm |
4 px |
meter-height-sm |
| Track corner |
fully round |
meter-radius |
| Label to bar |
4 px |
space-xs |
| Label to value |
at least 8 px |
space-md |
| Label and value style |
14 px / 20 px, medium weight; tabular figures for the value |
label-md |
| Description style |
12 px / 16 px |
body-sm |
Values follow the selected brand; switch the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-surface-sunken | | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 |
--bigbang-color-status-brand-emphasis | | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff |
--bigbang-color-status-neutral-emphasis | | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 |
--bigbang-color-status-success-emphasis | | #2da264#2da264#2da264 | #7dd09b#7dd09b#7dd09b |
--bigbang-color-status-warning-emphasis | | #c17a00#c17a00#c17a00 | #ecac5f#ecac5f#ecac5f |
--bigbang-color-status-danger-emphasis | | #e1595b#e1595b#e1595b | #ff9a97#ff9a97#ff9a97 |
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-meter-height-sm | | 4px4px4px | 4px4px4px |
--bigbang-meter-height-md | | 8px8px8px | 8px8px8px |
--bigbang-meter-radius | | 9999px9999px9999px | 9999px9999px9999px |
--bigbang-motion-progress-duration | | 0.15s0.15s0.15s | 0.15s0.15s0.15s |
| Interaction |
Motion |
Reduced motion |
| First show |
The fill grows from zero to the value with scale-x, over motion-progress-duration (motion.progress) |
The token shortens the duration; there is almost no movement |
| Value changes |
The fill scales to the new length at the same pace |
Same |
| Right to left |
The fill grows from the right edge (rtl:origin-right) |
Same |
| Loop |
None; it never repeats |
Same |
Values come from tokens; see Motion for details.