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

Loading API documentation...