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');
  }
});