Progress Circle

Status

Component checklist

Key points

• Progress circles measure the performance of any goal or target — a single metric
• They should be used to display the progress of a determinate process but not within a linear flow
• There are three sizes of progress circle to suit different situations: small, medium, and large
• The progress circle uses the highlight colour, as opposed to the selected colour, as it should stand out on a page composition
• Place the progress circle next to content to provide supporting context
• Progress circles should always be supported by a percentage and label nearby

Use a progress circle to display the completion status of a goal or target as a circular indicator.