Usage
A progress indicator is a thin bar that fills from the leading edge as a task runs. Use it when Firefox knows how much of the task is left and the person is waiting on that result. It reports progress and takes no input.
- Use it where the amount of work left is known, so the fill maps to something real.
- Place it with the item it belongs to, and give each item its own bar rather than one bar for a list.
- Pair it with text naming the task and its state, so the bar is never the only thing carrying the meaning.
- Let it reach the end before it goes. A bar that disappears at 60% reads as a failure.
- Use as a control. The bar isn’t draggable, so nobody can scrub or seek with it.
- Use to confirm something that already finished (use a snackbar).
- Use for page load in the browser chrome. The toolbar carries its own loading bar.
- Show for work that finishes in under 200ms, where the bar reads as a flash.
Design properties
| Property | Values | Default |
|---|---|---|
| Progress Variant | 0 | 10 | 30 | 50 | 80 | 100 | 0 |
Types
Material has two progress indicator types, linear and circular, and two progress indicator behaviors, determinate and indeterminate. Firefox for Android currently uses the linear determinate type everywhere.
Linear determinate
Use when Firefox can measure the work left, so the fill tracks an accurate number from start to finish.
Behavior and interaction
Behavior
- The bar appears when the task starts and goes when it ends.
- Nothing about it is touchable, so it has no pressed, focused, or disabled state.
- The fill moves in one direction.
- Pausing a task holds the fill in place rather than resetting it.
- Skip the bar for work that finishes in under 200ms, and keep it on screen for at least 400ms wherever it does appear, so it doesn’t read as a flash.
Positioning
- The bar spans the full width of its container and carries no margins of its own.
- Place it directly below the item it reports on, one bar per item.
- At the narrowest supported width it shortens with the container and the fill stays proportional.
- Keeps its 4dp height while the text around it grows, so check the row still holds together.
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Sep 3, 2026 |
1.0.0 |
Initial draft of guidance |