Progress Ring

<afp-progress-ring>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A progress ring component to visually represent the completion of a task or process in ring format.

<afp-progress-ring value="50"></afp-progress-ring>

<afp-progress-ring [value]=50></afp-progress-ring>

<AfpProgressRing value="50"></AfpProgressRing>

<AfpProgressRing :value=50></AfpProgressRing>

Examples #

Variants #

Use the variant attribute to set the progress ring's semantic variant.

<div class="afp-cluster">
  <afp-progress-ring value="50" variant="neutral"></afp-progress-ring>
  <afp-progress-ring value="50" variant="brand"></afp-progress-ring>
  <afp-progress-ring value="50" variant="accent"></afp-progress-ring>
  <afp-progress-ring value="50" variant="info"></afp-progress-ring>
  <afp-progress-ring value="50" variant="error"></afp-progress-ring>
  <afp-progress-ring value="50" variant="success"></afp-progress-ring>
  <afp-progress-ring value="50" variant="warning"></afp-progress-ring>
</div>

<div class="afp-cluster">
  <afp-progress-ring [value]=50 [variant]="'neutral'"></afp-progress-ring>
  <afp-progress-ring [value]=50 [variant]="'brand'"></afp-progress-ring>
  <afp-progress-ring [value]=50 [variant]="'accent'"></afp-progress-ring>
  <afp-progress-ring [value]=50 [variant]="'info'"></afp-progress-ring>
  <afp-progress-ring [value]=50 [variant]="'error'"></afp-progress-ring>
  <afp-progress-ring [value]=50 [variant]="'success'"></afp-progress-ring>
  <afp-progress-ring [value]=50 [variant]="'warning'"></afp-progress-ring>
</div>

<div class="afp-cluster">
  <AfpProgressRing value="50" variant="neutral"></AfpProgressRing>
  <AfpProgressRing value="50" variant="brand"></AfpProgressRing>
  <AfpProgressRing value="50" variant="accent"></AfpProgressRing>
  <AfpProgressRing value="50" variant="info"></AfpProgressRing>
  <AfpProgressRing value="50" variant="error"></AfpProgressRing>
  <AfpProgressRing value="50" variant="success"></AfpProgressRing>
  <AfpProgressRing value="50" variant="warning"></AfpProgressRing>
</div>

<div class="afp-cluster">
  <AfpProgressRing :value=50 :variant="'neutral'"></AfpProgressRing>
  <AfpProgressRing :value=50 :variant="'brand'"></AfpProgressRing>
  <AfpProgressRing :value=50 :variant="'accent'"></AfpProgressRing>
  <AfpProgressRing :value=50 :variant="'info'"></AfpProgressRing>
  <AfpProgressRing :value=50 :variant="'error'"></AfpProgressRing>
  <AfpProgressRing :value=50 :variant="'success'"></AfpProgressRing>
  <AfpProgressRing :value=50 :variant="'warning'"></AfpProgressRing>
</div>

Display Value #

Use the info attribute to display the progress value inside the ring.

<div class="afp-stack">
  <afp-progress-ring id="progress-ring" value="50" info></afp-progress-ring>
  <div class="afp-cluster afp-gap-3xs">
    <afp-button id="dash" shape="pill" appearance="filled"><afp-icon name="dash"></afp-icon></afp-button>
    <afp-button id="plus" shape="pill" appearance="filled"><afp-icon name="plus"></afp-icon></afp-button>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const progressRing = document.getElementById('progress-ring');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

    buttonPlus.addEventListener('afp-click', () => {
      let currentValue = progressRing.value;
      if (currentValue < 100) {
        progressRing.value = currentValue + 10;
      }
    });
    
    buttonDash.addEventListener('afp-click', () => {
      let currentValue = progressRing.value;
      if (currentValue > 0) {
        progressRing.value = currentValue - 10;
      }
    });
  });
</script>

<div class="afp-stack">
  <afp-progress-ring [id]="'progress-ring'" [value]=50 info></afp-progress-ring>
  <div class="afp-cluster afp-gap-3xs">
    <afp-button [id]="'dash'" [shape]="'pill'" [appearance]="'filled'"><afp-icon [name]="'dash'"></afp-icon></afp-button>
    <afp-button [id]="'plus'" [shape]="'pill'" [appearance]="'filled'"><afp-icon [name]="'plus'"></afp-icon></afp-button>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const progressRing = document.getElementById('progress-ring');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

    buttonPlus.addEventListener('afp-click', () => {
      let currentValue = progressRing.value;
      if (currentValue < 100) {
        progressRing.value = currentValue + 10;
      }
    });
    
    buttonDash.addEventListener('afp-click', () => {
      let currentValue = progressRing.value;
      if (currentValue > 0) {
        progressRing.value = currentValue - 10;
      }
    });
  });
</script>

<div class="afp-stack">
  <AfpProgressRing id="progress-ring" value="50" info></AfpProgressRing>
  <div class="afp-cluster afp-gap-3xs">
    <AfpButton id="dash" shape="pill" appearance="filled"><AfpIcon name="dash"></AfpIcon></AfpButton>
    <AfpButton id="plus" shape="pill" appearance="filled"><AfpIcon name="plus"></AfpIcon></AfpButton>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const progressRing = document.getElementById('progress-ring');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

    buttonPlus.addEventListener('afp-click', () => {
      let currentValue = progressRing.value;
      if (currentValue < 100) {
        progressRing.value = currentValue + 10;
      }
    });
    
    buttonDash.addEventListener('afp-click', () => {
      let currentValue = progressRing.value;
      if (currentValue > 0) {
        progressRing.value = currentValue - 10;
      }
    });
  });
</script>

<div class="afp-stack">
  <AfpProgressRing :id="'progress-ring'" :value=50 info></AfpProgressRing>
  <div class="afp-cluster afp-gap-3xs">
    <AfpButton :id="'dash'" :shape="'pill'" :appearance="'filled'"><AfpIcon :name="'dash'"></AfpIcon></AfpButton>
    <AfpButton :id="'plus'" :shape="'pill'" :appearance="'filled'"><AfpIcon :name="'plus'"></AfpIcon></AfpButton>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const progressRing = document.getElementById('progress-ring');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

    buttonPlus.addEventListener('afp-click', () => {
      let currentValue = progressRing.value;
      if (currentValue < 100) {
        progressRing.value = currentValue + 10;
      }
    });
    
    buttonDash.addEventListener('afp-click', () => {
      let currentValue = progressRing.value;
      if (currentValue > 0) {
        progressRing.value = currentValue - 10;
      }
    });
  });
</script>

Custom Value #

Use the default slot to set a custom value inside the progress ring.

Custom

<afp-progress-ring value="50">Custom</afp-progress-ring>

<afp-progress-ring [value]=50>Custom</afp-progress-ring>

<AfpProgressRing value="50">Custom</AfpProgressRing>

<AfpProgressRing :value=50>Custom</AfpProgressRing>

Customization #

Use CSS custom properties to customize the size and widths of the progress ring.

<div class="afp-cluster">
  <afp-progress-ring
    value="50"
    variant="brand"
    style="--afp-regular-progress-ring-size: 3rem; --afp-regular-progress-ring-track-width: 0.15rem; --afp-regular-progress-ring-indicator-width: 0.15rem"
  ></afp-progress-ring>
  <afp-progress-ring
    value="50"
    variant="brand"
    style="--afp-regular-progress-ring-size: 4rem; --afp-regular-progress-ring-track-width: 0.85rem"
  ></afp-progress-ring>
  <afp-progress-ring
    value="50"
    variant="brand"
    style="--afp-regular-progress-ring-size: 5rem; --afp-regular-progress-ring-track-width: 0.3rem; --afp-regular-progress-ring-indicator-width: 0.7rem"
  ></afp-progress-ring>
</div>

<div class="afp-cluster">
  <afp-progress-ring
    [value]=50
    [variant]="'brand'"
    [style]="'--afp-regular-progress-ring-size: 3rem; --afp-regular-progress-ring-track-width: 0.15rem; --afp-regular-progress-ring-indicator-width: 0.15rem'"
  ></afp-progress-ring>
  <afp-progress-ring
    [value]=50
    [variant]="'brand'"
    [style]="'--afp-regular-progress-ring-size: 4rem; --afp-regular-progress-ring-track-width: 0.85rem'"
  ></afp-progress-ring>
  <afp-progress-ring
    [value]=50
    [variant]="'brand'"
    [style]="'--afp-regular-progress-ring-size: 5rem; --afp-regular-progress-ring-track-width: 0.3rem; --afp-regular-progress-ring-indicator-width: 0.7rem'"
  ></afp-progress-ring>
</div>

<div class="afp-cluster">
  <AfpProgressRing
    value="50"
    variant="brand"
    style="--afp-regular-progress-ring-size: 3rem; --afp-regular-progress-ring-track-width: 0.15rem; --afp-regular-progress-ring-indicator-width: 0.15rem"
  ></AfpProgressRing>
  <AfpProgressRing
    value="50"
    variant="brand"
    style="--afp-regular-progress-ring-size: 4rem; --afp-regular-progress-ring-track-width: 0.85rem"
  ></AfpProgressRing>
  <AfpProgressRing
    value="50"
    variant="brand"
    style="--afp-regular-progress-ring-size: 5rem; --afp-regular-progress-ring-track-width: 0.3rem; --afp-regular-progress-ring-indicator-width: 0.7rem"
  ></AfpProgressRing>
</div>

<div class="afp-cluster">
  <AfpProgressRing
    :value=50
    :variant="'brand'"
    :style="'--afp-regular-progress-ring-size: 3rem; --afp-regular-progress-ring-track-width: 0.15rem; --afp-regular-progress-ring-indicator-width: 0.15rem'"
  ></AfpProgressRing>
  <AfpProgressRing
    :value=50
    :variant="'brand'"
    :style="'--afp-regular-progress-ring-size: 4rem; --afp-regular-progress-ring-track-width: 0.85rem'"
  ></AfpProgressRing>
  <AfpProgressRing
    :value=50
    :variant="'brand'"
    :style="'--afp-regular-progress-ring-size: 5rem; --afp-regular-progress-ring-track-width: 0.3rem; --afp-regular-progress-ring-indicator-width: 0.7rem'"
  ></AfpProgressRing>
</div>

Properties

Learn more about properties.

Name Description Reflects

value

value which is displayed in the progress ring

Type number

Default 0

info

shows value in progress ring.

Type boolean

Default false

label

a label that describes the progress ring for assistive devices.

Type string

variant

variant of progress ring

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

Default AfpVariant.NEUTRAL

Events

Learn more about events.

Name	Return	Description
`afp-value-changed`	`number`	Emitted when the progress ring's value changes.

Slots

Learn more about slots.

Name	Description
`default`	Default slot used to customize the value display inside the progress ring.

Internationalization

Learn more about internationalization.

Key	Description
`progress-ring.aria-label`	The default `aria-label` text for Progress ring

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`svg`	The SVG element containing the progress ring	`::part(svg)`
`track`	The track of the progress ring	`::part(track)`
`indicator`	The indicator of the progress ring	`::part(indicator)`
`label`	The label displaying the progress value	`::part(label)`

CSS Custom Properties

Name	Description	Default
`--afp-progress-ring-size`	The size of the progress ring.	`--afp-size-3xl`
`--afp-progress-ring-track-width`	The size of the progress ring track.	`--afp-size-3xs`
`--afp-progress-ring-indicator-width`	The size of the progress ring indicator.	`--afp-size-3xs`

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/progress-ring/progress-ring.js';