Progress Circle

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

#

#

Extra small

Small

Medium (Default)

Large

#

#

  • 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.

#

  • 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.

#

Inherits margin props.

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

Indicator size.

On this page

  • Example
  • Sizes
  • Guidelines
  • When to use
  • When not to use
  • Props