webawesome/docs/components/progress-ring.md

Progress Ring

[component-header:sl-progress-ring]

Progress rings are used to show the progress of a determinate operation in a circular fashion.

<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
  <sl-progress-ring percentage="0">0%</sl-progress-ring><br>
  <sl-progress-ring percentage="25">25%</sl-progress-ring><br>
  <sl-progress-ring percentage="50">50%</sl-progress-ring><br>
  <sl-progress-ring percentage="75">75%</sl-progress-ring><br>
  <sl-progress-ring percentage="100">100%</sl-progress-ring>
</div>

Examples

Size

<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
  <sl-progress-ring percentage="50" size="100">50%</sl-progress-ring><br>
  <sl-progress-ring percentage="50" size="150">50%</sl-progress-ring><br>
  <sl-progress-ring percentage="50" size="200">50%</sl-progress-ring><br>
</div>

[component-metadata:sl-progress-ring]