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

With track layer
Without track layer
<!-- With track layer -->
<svg class="qtm-progress-circle">
<circle class="qtm-track"></circle>
<circle class="qtm-progress"></circle>
</svg>
<!-- Without track layer -->
<svg class="qtm-progress-circle">
<circle class="qtm-progress"></circle>
</svg>

Indeterminate

Sizes

Progress circles are available in five sizes with the following classes: qtm-xsmall, qtm-small, qtm-medium, qtm-large, qtm-xlarge.

While the default size is the medium one, the qtm-medium class exists in case you need to reset the element to its medium size.

<svg class="qtm-progress-circle qtm-xsmall">
<circle class="qtm-track"></circle>
<circle class="qtm-progress"></circle>
</svg>
...

Colors

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

<svg class="qtm-progress-circle qtm-primary">
<circle class="qtm-track"></circle>
<circle class="qtm-progress"></circle>
</svg>
<svg class="qtm-progress-circle qtm-neutral">
<circle class="qtm-track"></circle>
<circle class="qtm-progress"></circle>
</svg>
<svg class="qtm-progress-circle qtm-white">
<circle class="qtm-track"></circle>
<circle class="qtm-progress"></circle>
</svg>

Examples

Click me
<button
id="button"
style="width: 90px;"
class="qtm-button qtm-filled qtm-primary justify-center"
>
<span class="">Click me</span>
<svg class="qtm-progress-circle qtm-white hidden">
<circle class="qtm-track"></circle>
<circle class="qtm-progress"></circle>
</svg>
</button>
const button = document.querySelector('#button');
button.addEventListener('click', () => {
if (button.querySelector('svg').classList.contains('hidden')) {
button.querySelector('span').classList.add('hidden');
button.querySelector('svg').classList.remove('hidden');
} else {
button.querySelector('span').classList.remove('hidden');
button.querySelector('svg').classList.add('hidden');
}
});