Progress Beta
State Progress
The State Progress component is used to provide a visual representation the current state of a financial process.
The maximum amount is represented by a grey bar, and the current state or progress is represented by a colored bar on top of it.
A State Progress can also render an exceeded state, in this case, the bar is filled, and a darker area to the right represents the surplus amount.
The bar is tinted in green or red color, depending on the semantic state of the given progress - e.g. saving processes are considered positive and thus use a green color.
A loan or the spendings on a credit card are considered negative and use a red color.
Rules For Android
Tokens
| Element | Default Fill | Excess Modifier |
|---|---|---|
| positive | color.state.positive | overlay.medium |
| negative bar | color.state.negative | overlay.medium |
| base | color.fill.quaternary | - |
Flow Progress
The Flow Progress component is used to visualise the progress in a multi-step flow, so that users have a better understanding of the remaining length until a given flow is completed.
A Flow Progress can be rendered either as a continuous line, or with explicit steps.
The component replaces default Navigation Bar elements like the Back action and the Title, and can be inserted in both the Navigation Bar and the Header component.
Rules For Designers
- Replace the mixin / Nav Bar & App Bar element in the Navigation Bar with the Flow Progress component with Figmas “Swap Instance” feature.
Rules For Android
Tokens
| Element | Default Fill |
|---|---|
| progress | color.state.info |
| base | color.fill.quaternary |