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.

Example - State Progress Bar in Components

Rules For Android

Use MultiValueProgressBar

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

Use LinearProgressIndicator from Material 3
Specs
Docs
Steps are not implemented.
A progress indicator can be added to a GeorgeTopAppBar via staticTopContent.

Tokens

Element	Default Fill
progress	`color.state.info`
base	`color.fill.quaternary`