Progress, meter and steps

How it works

The progress element represents the completion of a task. max is how much work the task needs in total, value is how much is done, and if it is not specified, the value is indeterminate. Its anatomy is a label that says what is progressing, the numeric value, the coloured completed portion and the remaining portion.

The meter element represents a scalar value within a known range or a fractional value, such as disk usage, a data plan or password strength. It takes value, min, max, low, high and optimum.

A step indicator shows progress through a process. It should have between three and six steps, and the user must be able to go back or confirm to go to the next.

Examples

• Loading percentage
• Progress queue
• Indeterminate progress
• File upload
• Storage meter
• Password strength
• Coffee strength
• Disk usage