Progress Bar

<cs-progress-bar value="40"></cs-progress-bar>

<cs-progress-bar value="50" label="Upload progress"></cs-progress-bar>

<cs-progress-bar indeterminate></cs-progress-bar>

<cs-progress-bar
  value="60"
  style="
    --track-height: 1.5rem;
    --track-color: var(--cs-color-neutral-fill-quiet);
    --indicator-color: var(--cs-color-success-fill-loud);
  "
></cs-progress-bar>

<div class="cs-stack">
  <cs-progress-bar value="50" id="progress-bar-demo">50%</cs-progress-bar>

  <cs-divider></cs-divider>

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

<script>
  const progressBar = document.querySelector('#progress-bar-demo');
  const subtractButton = document.querySelector('cs-button:has(cs-icon[name="remove"])');
  const addButton = document.querySelector('cs-button:has(cs-icon[name="add"])');

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

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