Progress Bar

<afp-progress-bar>

stable

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

A progress bar component to visually represent the completion of a task or process.

<afp-progress-bar value="30" ></afp-progress-bar>

<afp-progress-bar [value]=30 ></afp-progress-bar>

<AfpProgressBar value="30" ></AfpProgressBar>

<AfpProgressBar :value=30 ></AfpProgressBar>

Examples #

Variants #

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

<div class="afp-stack">
  <afp-progress-bar value="70" variant="neutral" label="neutral"></afp-progress-bar>
  <afp-progress-bar value="55" variant="brand" label="brand"></afp-progress-bar>
  <afp-progress-bar value="30" variant="accent" label="accent"></afp-progress-bar>
  <afp-progress-bar value="60" variant="info" label="info"></afp-progress-bar>
  <afp-progress-bar value="90" variant="error" label="error"></afp-progress-bar>
  <afp-progress-bar value="84" variant="success" label="success"></afp-progress-bar>
  <afp-progress-bar value="20" variant="warning" label="warning"></afp-progress-bar>
</div>

<div class="afp-stack">
  <afp-progress-bar [value]=70 [variant]="'neutral'" [label]="'neutral'"></afp-progress-bar>
  <afp-progress-bar [value]=55 [variant]="'brand'" [label]="'brand'"></afp-progress-bar>
  <afp-progress-bar [value]=30 [variant]="'accent'" [label]="'accent'"></afp-progress-bar>
  <afp-progress-bar [value]=60 [variant]="'info'" [label]="'info'"></afp-progress-bar>
  <afp-progress-bar [value]=90 [variant]="'error'" [label]="'error'"></afp-progress-bar>
  <afp-progress-bar [value]=84 [variant]="'success'" [label]="'success'"></afp-progress-bar>
  <afp-progress-bar [value]=20 [variant]="'warning'" [label]="'warning'"></afp-progress-bar>
</div>

<div class="afp-stack">
  <AfpProgressBar value="70" variant="neutral" label="neutral"></AfpProgressBar>
  <AfpProgressBar value="55" variant="brand" label="brand"></AfpProgressBar>
  <AfpProgressBar value="30" variant="accent" label="accent"></AfpProgressBar>
  <AfpProgressBar value="60" variant="info" label="info"></AfpProgressBar>
  <AfpProgressBar value="90" variant="error" label="error"></AfpProgressBar>
  <AfpProgressBar value="84" variant="success" label="success"></AfpProgressBar>
  <AfpProgressBar value="20" variant="warning" label="warning"></AfpProgressBar>
</div>

<div class="afp-stack">
  <AfpProgressBar :value=70 :variant="'neutral'" :label="'neutral'"></AfpProgressBar>
  <AfpProgressBar :value=55 :variant="'brand'" :label="'brand'"></AfpProgressBar>
  <AfpProgressBar :value=30 :variant="'accent'" :label="'accent'"></AfpProgressBar>
  <AfpProgressBar :value=60 :variant="'info'" :label="'info'"></AfpProgressBar>
  <AfpProgressBar :value=90 :variant="'error'" :label="'error'"></AfpProgressBar>
  <AfpProgressBar :value=84 :variant="'success'" :label="'success'"></AfpProgressBar>
  <AfpProgressBar :value=20 :variant="'warning'" :label="'warning'"></AfpProgressBar>
</div>

Shapes #

Use the shape attribute to change a progress bar's shape.

<div class="afp-stack">
  <afp-progress-bar value="60" shape="pill"></afp-progress-bar>
  <afp-progress-bar value="20" shape="rounded"></afp-progress-bar>
  <afp-progress-bar value="80" shape="soft"></afp-progress-bar>
  <afp-progress-bar value="40" shape="square"></afp-progress-bar>
</div>

<div class="afp-stack">
  <afp-progress-bar [value]=60 [shape]="'pill'"></afp-progress-bar>
  <afp-progress-bar [value]=20 [shape]="'rounded'"></afp-progress-bar>
  <afp-progress-bar [value]=80 [shape]="'soft'"></afp-progress-bar>
  <afp-progress-bar [value]=40 [shape]="'square'"></afp-progress-bar>
</div>

<div class="afp-stack">
  <AfpProgressBar value="60" shape="pill"></AfpProgressBar>
  <AfpProgressBar value="20" shape="rounded"></AfpProgressBar>
  <AfpProgressBar value="80" shape="soft"></AfpProgressBar>
  <AfpProgressBar value="40" shape="square"></AfpProgressBar>
</div>

<div class="afp-stack">
  <AfpProgressBar :value=60 :shape="'pill'"></AfpProgressBar>
  <AfpProgressBar :value=20 :shape="'rounded'"></AfpProgressBar>
  <AfpProgressBar :value=80 :shape="'soft'"></AfpProgressBar>
  <AfpProgressBar :value=40 :shape="'square'"></AfpProgressBar>
</div>

Display Value #

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

<div class="afp-stack">
  <afp-progress-bar id="progress-bar" value="50" shape="pill" info></afp-progress-bar>
  <div class="afp-cluster afp-gap-xs">
    <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 progressBar = document.getElementById('progress-bar');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

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

<div class="afp-stack">
  <afp-progress-bar [id]="'progress-bar'" [value]=50 [shape]="'pill'" info></afp-progress-bar>
  <div class="afp-cluster afp-gap-xs">
    <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 progressBar = document.getElementById('progress-bar');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

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

<div class="afp-stack">
  <AfpProgressBar id="progress-bar" value="50" shape="pill" info></AfpProgressBar>
  <div class="afp-cluster afp-gap-xs">
    <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 progressBar = document.getElementById('progress-bar');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

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

<div class="afp-stack">
  <AfpProgressBar :id="'progress-bar'" :value=50 :shape="'pill'" info></AfpProgressBar>
  <div class="afp-cluster afp-gap-xs">
    <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 progressBar = document.getElementById('progress-bar');
    const buttonPlus = document.getElementById('plus');
    const buttonDash = document.getElementById('dash');

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

Indeterminate #

Use the indeterminate attribute to make a progress bar busy. You can also customize the indeterminate animation duration using the CSS variable --afp-progress-bar-indeterminate.

<div class="afp-stack">
  <afp-progress-bar variant="brand" value="50" indeterminate></afp-progress-bar>
  <afp-progress-bar variant="brand" value="50" style="--afp-progress-bar-indeterminate: 5s" indeterminate></afp-progress-bar>
</div>

<div class="afp-stack">
  <afp-progress-bar [variant]="'brand'" [value]=50 indeterminate></afp-progress-bar>
  <afp-progress-bar [variant]="'brand'" [value]=50 [style]="'--afp-progress-bar-indeterminate: 5s'" indeterminate></afp-progress-bar>
</div>

<div class="afp-stack">
  <AfpProgressBar variant="brand" value="50" indeterminate></AfpProgressBar>
  <AfpProgressBar variant="brand" value="50" style="--afp-progress-bar-indeterminate: 5s" indeterminate></AfpProgressBar>
</div>

<div class="afp-stack">
  <AfpProgressBar :variant="'brand'" :value=50 indeterminate></AfpProgressBar>
  <AfpProgressBar :variant="'brand'" :value=50 :style="'--afp-progress-bar-indeterminate: 5s'" indeterminate></AfpProgressBar>
</div>

Custom Value #

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

Custom Value

<afp-progress-bar value="50">Custom Value</afp-progress-bar>

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

<AfpProgressBar value="50">Custom Value</AfpProgressBar>

<AfpProgressBar :value=50>Custom Value</AfpProgressBar>

Custom Height #

Use the CSS variable --afp-progress-bar-height to set a custom height for the progress bar.

<afp-progress-bar value="50" style="--afp-progress-bar-height: 8px"></afp-progress-bar>

<afp-progress-bar [value]=50 [style]="'--afp-progress-bar-height: 8px'"></afp-progress-bar>

<AfpProgressBar value="50" style="--afp-progress-bar-height: 8px"></AfpProgressBar>

<AfpProgressBar :value=50 :style="'--afp-progress-bar-height: 8px'"></AfpProgressBar>

Properties

Learn more about properties.

Name Description Reflects

indeterminate

enables loading style and disables the progress bar

Type boolean

Default false

value

value which is displayed in the progress bar

Type number

info

shows value in progress bar.

Type boolean

Default false

label

a label that describes the progress bar for assistive devices.

Type string

variant

variant of progress bar

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

shape

shape of the progress bar

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.PILL

Events

Learn more about events.

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

Slots

Learn more about slots.

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

Internationalization

Learn more about internationalization.

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

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`wrapper`	The outer container that is enclosing the indicator	`::part(wrapper)`
`indicator`	The container for the indicator that represents the progress by filling the progress bar	`::part(indicator)`

CSS Custom Properties

Name	Description	Default
`--afp-progress-bar-height`	The height of the progress bar	`--afp-size-xs`
`--afp-progress-bar-indeterminate`	The indeterminate animation time for the progress bar	`2.5s`

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-bar/progress-bar.js';