Progress bar
Examples
Colors
Sizes
Setting the progress bar’s value
Best practices
Related components
Importing
Properties
CSS Parts

Progress Bar

<ahi-progress-bar> | AhiProgressBar

The progress bar component is used to visually represent the completion of a task or operation. It shows how much of the task has been completed and how much is still left.

Use the label attribute to label the progress bar and tell assistive devices how to announce it.

<ahi-progress-bar value="75" label="Upload progress"></ahi-progress-bar>

Examples

Colors

Use the color attribute to change a progress bar’s color.

<div style="display: flex; flex-direction: column; gap: var(--ahi-space-2)">
  <ahi-progress-bar value="20" color="highlight"></ahi-progress-bar>
  <ahi-progress-bar value="40" color="primary"></ahi-progress-bar>
  <ahi-progress-bar value="60" color="success"></ahi-progress-bar>
  <ahi-progress-bar value="75" color="critical"></ahi-progress-bar>
</div>

Sizes

Use the size attribute to change a progress bar’s size.

<div style="display: flex; flex-direction: column; gap: var(--ahi-space-2)">
  <ahi-progress-bar value="20" size="small"></ahi-progress-bar>
  <ahi-progress-bar value="40" size="medium"></ahi-progress-bar>
  <ahi-progress-bar value="60" size="large"></ahi-progress-bar>
</div>

Setting the progress bar’s value

<ahi-progress-bar class="progress-bar"></ahi-progress-bar>

<script>
  const progressBar = document.querySelector('.progress-bar');
  const update = () => {
    if (progress >= 100) {
      clearInterval(timer);
      progressBar.value = progress = 0;
      timer = setInterval(update, 500);
    } else {
      progress += Math.floor(Math.random() * 20);
      progressBar.value = progress;
    }
  };

  let progress = 0;
  let timer = setInterval(update, 500);
</script>

Best practices

Progress bar components should:

Give users an indication of how much of the task has completed and how much is left.
Not be used for entire page loads. In this case, use the Skeleton component.

For tasks with a short load time, use the Spinner component
For full page loads, use the Skeleton component

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/progress-bar/progress-bar.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/progress-bar/progress-bar.js';

Properties

Name	Description	Type	Default
`color`	The progress bar’s color.	`'highlight' \| 'primary' \| 'success' \| 'critical'`	`'highlight'`
`label`	A custom label for assistive devices.	`string`	`''`
`size`	The progress bar’s size.	`'small' \| 'medium' \| 'large'`	`'medium'`
`value`	The current progress as a percentage, 0 to 100.	`number`	`0`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

CSS Parts

Name	Description
`base`	Deprecated. Use the `progress-bar` part instead.
`progress-bar`	The component’s outer wrapper.
`indicator`	The progress bar’s indicator.

Learn more about customizing CSS parts.