Progress Ring

[component-header:sl-progress-ring]

Progress rings...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<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>

[component-metadata:sl-progress-ring]

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>

1.1 KiB Raw Blame History

Progress Ring

Examples

Size

1.1 KiB

Raw Blame History