Progress Bar
The progress bar is broken into two states: Complete and Incomplete.
The Complete state is represented from left to right as a filled foreground box.
The Incomplete state is represented from left to right as an unfilled stroke box with a solid color background.
As an operation progresses, the Complete fill box expands from left to right as the Incomplete stroked box contracts from left to right at an equal size and rate that is linear in behavior.
The completion status is measured by the Progress Bar label. Textual labels are always required.
It’s preferred that you use the indicated style but you can use another method of labeling if that fits with your design better.
The formatting of the label should be contextual. For example, if you are measuring time, the label might read “5 Minutes Remaining.”
