OLYSENSE Design System

Progress bars are used to show the status of an ongoing operation.

<ods-progress-bar value="50"></ods-progress-bar>

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

<ods-progress-bar value="50" label="Upload progress"></ods-progress-bar>

import { OdsProgressBar } from '@ods/components/react.progress-bar';

const Example = () => {
  return (
    <OdsProgressBar value={50} label="Upload progress"></OdsProgressBar>
  )
}

export default Example;

Use the default slot to show a value.

50%

<ods-progress-bar class="progress-bar-values" value="50">50%</ods-progress-bar>

<br />

<ods-icon-button circle name="minus" label="Decrease"></ods-icon-button>
<ods-icon-button circle name="plus" label="Increase"></ods-icon-button>

<script>
  const progressBar = document.querySelector('.progress-bar-values');
  const subtractButton = progressBar.nextElementSibling.nextElementSibling;
  const addButton = subtractButton.nextElementSibling;

  addButton.addEventListener('click', () => {
    const value = Math.min(100, progressBar.value + 10);
    progressBar.value = value;
    progressBar.textContent = `${value}%`;
  });

  subtractButton.addEventListener('click', () => {
    const value = Math.max(0, progressBar.value - 10);
    progressBar.value = value;
    progressBar.textContent = `${value}%`;
  });
</script>

import { useState } from 'react';
import { OdsProgressBar } from '@ods/components/react.progress-bar';
import { OdsIconButton } from '@ods/components/react.icon-button';

const Example = () => {
  const [value, setValue] = useState(50);

  function adjustValue(amount: any) {
    let newValue = value + amount;
    if (newValue < 0) newValue = 0;
    if (newValue > 100) newValue = 100;
    setValue(newValue);
  }

  return (
    <>
      <OdsProgressBar value={value}>{value}%</OdsProgressBar>

      <br />

      <div ods-layout="inline gap:xs">
        <OdsIconButton name='minus' variant='secondary' label='Decrease' onClick={() => adjustValue(-10)}>Secondary</OdsIconButton>
        <OdsIconButton name='plus' variant='secondary' label='Increase' onClick={() => adjustValue(10)}>Secondary</OdsIconButton>
      </div>
    </>
  );
}

export default Example;

The indeterminate attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, value is ignored and the label, if present, will not be shown.

<ods-progress-bar indeterminate></ods-progress-bar>

Importing

import '@ods/components/web.progress-bar';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	A label to show inside the progress indicator.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
value	number	0
indeterminate	boolean	false
label	string	''

Parts

Name	Description
base	The component's base wrapper.
indicator	The progress bar's indicator.
label	The progress bar's label.

Progress Bar

Examples

Basic

Accessible Label

Showing Values

Indeterminate

Importing

Slots

Properties

Parts