Default Gray Amethyst

Progress Bar

<mo-progress-bar> | MOProgressBar
Since 1.0 stable

Progress bars are used to show the progress of an operation.

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

import { MOProgressBar } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOProgressBar value={50} />;

Examples

Custom height

Use the --height custom property to set the progress bar’s height.

<mo-progress-bar value="50" style="--height: 6px;"></mo-progress-bar>

import { MOProgressBar } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOProgressBar value={50} style={{ '--height': '6px' }} />;

Labels

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

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

import { MOProgressBar } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOProgressBar value="50" label="Upload progress" />;

Showing values

Use the default slot to show a value.

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

<br />

<mo-button variant="docs" pill><mo-icon name="minus"></mo-icon></mo-button>
<mo-button variant="docs" pill><mo-icon name="plus"></mo-icon></mo-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 { MOButton, MOIcon, MOProgressBar } from '@metsooutotec/modes-web-components/dist/react';

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

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

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

      <br />

      <MOButton circle onClick={() => adjustValue(-10)}>
        <MOIcon name="dash" />
      </MOButton>

      <MOButton circle onClick={() => adjustValue(10)}>
        <MOIcon name="plus" />
      </MOButton>
    </>
  );
};

Appearance

The appearance attribute can be used to customize the visual look of the progress bar. Set it to success or to render a success bar or alert to render a bar that suggests that the progress failed.

Success
Alert 
Success
<mo-progress-bar value="100" appearance="success"></mo-progress-bar>
<br />
Alert
<mo-progress-bar value="30" appearance="alert"></mo-progress-bar>

import { MOProgressBar } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    Success
    <MOProgressBar value="100" appearance="success" />
    <br />
    Alert
    <MOProgressBar value="30" appearance="alert" />
  </>
);

Indeterminate

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. 

<mo-progress-bar indeterminate></mo-progress-bar>

import { MOProgressBar } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOProgressBar indeterminate />;

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/progress-bar/progress-bar.js';

To import this component as a React component:

import MOProgressBar from '@metsooutotec/modes-web-components/dist/react/progress-bar/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/progress-bar/progress-bar.js"></script>

Slots

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

Learn more about using slots.

Properties

Name Description Reflects Type Default
value The current progress, 0 to 100. number 0
indeterminate When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. boolean false
appearance The appearance of the progress bar. 'default' | 'success' | 'alert' 'default'
label A custom label for the progress bar’s aria label. string ''
lang The locale to render the component in. string -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name Description Default
--height The progress bar’s height.
--track-color The track color.
--indicator-color The indicator color.
--label-color The label color.

Learn more about customizing CSS custom properties.

Parts

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

Learn more about customizing CSS parts.