Progress Ring

<cs-progress-ring value="25"></cs-progress-ring>

<cs-progress-ring value="25" label="Sync progress"></cs-progress-ring>

<cs-progress-ring value="50" style="--cs-progress-ring-size: 200px;"></cs-progress-ring>

<cs-progress-ring value="50" style="--cs-track-width: 6px; --cs-progress-ring-indicator-width: 12px;"></cs-progress-ring>

<cs-progress-ring
  value="50"
  style="
    --cs-track-color: var(--cs-color-success-fill-quiet);
    --cs-indicator-color: var(--cs-color-success-fill-loud);
  "
></cs-progress-ring>

<div class="progress-ring-overview">
  <cs-progress-ring value="50" class="progress-ring-values">50%</cs-progress-ring>

  <cs-divider></cs-divider>

  <div class="cs-cluster">
    <cs-button appearance="filled" circle><cs-icon name="remove" label="Decrease"></cs-icon></cs-button>
    <cs-button appearance="filled" circle><cs-icon name="add" label="Increase"></cs-icon></cs-button>
  </div>
</div>

<script>
  const progressRing = document.querySelector('.progress-ring-values');
  const subtractButton = document.querySelector('.progress-ring-overview cs-button:has(cs-icon[name="remove"])');
  const addButton = document.querySelector('.progress-ring-overview cs-button:has(cs-icon[name="add"])');

  addButton.addEventListener('click', () => {
    const value = Math.min(100, progressRing.value + 10);
    progressRing.value = value;
    progressRing.textContent = `${value}%`;
  });

  subtractButton.addEventListener('click', () => {
    const value = Math.max(0, progressRing.value - 10);
    progressRing.value = value;
    progressRing.textContent = `${value}%`;
  });
</script>