Progress Circle

A progress circle is a progress indicator, either determinate (indicating a percentage of progression) or indeterminate (indicating a state of loading).

The track circle of a QtmProgressCircle is not visible if this component contains an attribute track={false}

With track layer

Without track layer

<!-- With track layer -->
<QtmProgressCircle />
<!-- Without track layer -->
<QtmProgressCircle track={false} />

Indeterminate

Sizes

Progress circles are available in five sizes: xsmall, small, medium, large, xlarge.

While the default size is the medium one, the size="medium" attribute exists in case you need to reset the element to its medium size.

<QtmProgressCircle size="xsmall" />
<QtmProgressCircle size="small" />
<QtmProgressCircle size="medium" />
<QtmProgressCircle size="large" />
<QtmProgressCircle size="xlarge" />

Colors

Progress circles are available in three colors: primary, neutral and white.The default color is the primary one.

<QtmProgressCircle color="primary" />
<QtmProgressCircle color="neutral" />
<QtmProgressCircle color="white" />

Examples

Click me

<QtmButton>
  <span>Click me </span>
  <QtmProgressCircle color="white" />
</QtmButton>

API

QtmProgressCircle

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
color	"neutral" | "primary" | "white"	'primary'	The color of element
size	"large" | "medium" | "small" | "xlarge" | "xsmall"	'medium'	The size of element
track	boolean	true	If false, the track circle is not visible.