Skip to main content
🏠ComponentsProgress CircleVersion: 2.0.0-beta.6

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

PropertyTypeDefaultDescription
classesstringlist 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
trackbooleantrueIf false, the track circle is not visible.