| State |
Visual change |
Tokens |
| Determinate |
Track on the layer fill; the fill follows the value, in the status colour for the success, warning and danger tones |
color-surface-layer-2, color-action-primary-default, color-status-*-emphasis |
| Indeterminate |
A one-third fill that sweeps |
period-indeterminate |
| Success / error |
Fill in the status colour |
color-status-success-emphasis, color-status-danger-emphasis |
| Property |
Value |
Token |
| Track thickness |
4 px (default sm) / 8 px |
progress-height-sm, progress-height-md |
| Label to track |
12 px |
space-lg |
| Label / value |
label-md / body-md (text-subtle) |
text.label-md, text.body-md |
| Corners |
Track and fill fully round; the fill keeps round ends at every value |
radius-full |
The warning tone fills with status-warning-emphasis; it is for a quota near its limit.
Values follow the selected brand; change the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-progress-height-sm | | 4px4px4px | 4px4px4px |
--bigbang-progress-height-md | | 8px8px8px | 8px8px8px |
--bigbang-color-surface-sunken | | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 |
--bigbang-color-action-primary-default | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-status-success-emphasis | | #2da264#2da264#2da264 | #7dd09b#7dd09b#7dd09b |
--bigbang-color-status-danger-emphasis | | #e1595b#e1595b#e1595b | #ff9a97#ff9a97#ff9a97 |
--bigbang-motion-progress-duration | | 0.15s0.15s0.15s | 0.15s0.15s0.15s |
--bigbang-period-indeterminate | | 1.5s1.5s1.5s | 1.5s1.5s1.5s |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
Fill (motion.progress) |
scale (x axis) |
motion-progress-duration |
easing-productive |
Shorter. |
Sweep (motion.indeterminate) |
translate, infinite loop |
period-indeterminate |
easing-linear |
Stops; a faded full-width bar. |
See Motion for the values.