Skip to content
hightouchUI

Design system

v40.6.0

Progress circle

Progress circle shows the progress of a long-running action that can be measured or estimated at a glance.

Example

Sizes

Extra small

Small

Medium (Default)

Large

Guidelines

When to use

  • When a ProgressBar is too large and the indicator needs to fit in a small space. Otherwise, use a ProgressBar.
  • When action is expected to run for a long time and progress can be measured or estimated.

When not to use

  • If action is expected to finish quickly, use a spinner.
  • If you need to display an indication of a progress immediately after user performs an action, use a spinner.

Props

Inherits margin props.

NameDefaultDescription
aria-label

string

Mandatory label for the progress circle. Required for accessibility.

size"md""xs" | "sm" | "md" | "lg"

Indicator size.