Progress Ring Basic

Set value (or percentage) within the min/max range; the fill animates to every assigned value. Child elements with data-percentage or data-value render the current number — the attribute’s number sets the decimal places — and a data-value-text element supplies aria-valuetext.

Upload Progress

Code

The following example assumes that you have imported the component and set up the theme.

<div class="progress-container">
  <h3 id="progress-ring-label">Upload Progress</h3>

  <sv-progress-ring id="progress-ring" aria-labelledby="progress-ring-label" max="500" min="0" percentage="50">
    <p data-value-text>
      <span data-percentage="0"></span>
      <span>%</span>
    </p>
  </sv-progress-ring>

  <button id="progress-button" type="button" class="update-button">Update Progress</button>
</div>

<script type="module">
9 collapsed lines
  /** @type {HTMLButtonElement} */
  const progressButton = document.querySelector("#progress-button");

  /** @type {ProgressRing} */
  const progressRing = document.querySelector("#progress-ring");

  progressButton.addEventListener("click", () => {
    progressRing.value = Math.floor(Math.random() * 500);
  });
</script>

<style>
26 collapsed lines
  .progress-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
  }

  sv-progress-ring {
    inline-size: 100%;
    max-inline-size: 200px;
    margin-block: 1em;

    span {
      font-family: monospace;
      font-size: 2rem;
    }
  }

  .update-button {
    padding: 0.5em 1em;
    color: var(--sv-accent-content);
    cursor: pointer;
    background-color: var(--sv-accent);
    border: none;
    border-radius: var(--sv-bdr-rad-md);
  }
</style>