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 qtm-progress-circle is not visible if this component contains an attribute track="false"

With track layer

Without track layer

<!-- With track layer -->
<qtm-progress-circle />
<!-- Without track layer -->
<qtm-progress-circle 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.

<qtm-progress-circle size="xsmall" />
<qtm-progress-circle size="small" />
<qtm-progress-circle size="medium" />
<qtm-progress-circle size="large" />
<qtm-progress-circle size="xlarge" />

Colors

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

<qtm-progress-circle color="primary" />
<qtm-progress-circle color="neutral" />
<qtm-progress-circle color="white" />

Examples

Click me

<qtm-button>
  <span>Click me </span>
  <qtm-progress-circle color="white" />
</qtm-button>

API

qtm-progress-circle

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.