Skip to Content

Progress indicator

Progress indicators express an unspecified wait time or display the length of a process.

Progress linear

This page has not yet been finished and is being worked on. In the meantime, you can view the stories.

import * as React from 'react';
import { ProgressLinear } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <ProgressLinear indeterminate />
    </div>
  );
};

Props

Prop Description Default
value
Progress percentage. Should be a number between 0 and 100.
number
indeterminate
Progress variant. If true, value will be ignored.
Defaults to true if value is passed, otherwise false.
boolean
labels
Labels array. One label will be centered, two will be put to the sides.
ReactNode[]
isAnimated
Apply animation to the value change, if determinate.
boolean
false
status
Status of progress.
"positive" | "negative" | "warning"
labelGroupProps
Pass props to ProgressLinear label group.
DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
as
"symbol" | "object" | "div" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 158 more ... | FunctionComponent<...>

Progress radial

This page has not yet been finished and is being worked on. In the meantime, you can view the stories.

import * as React from 'react';
import { ProgressRadial } from '@itwin/itwinui-react';

export default () => {
  return <ProgressRadial indeterminate />;
};

Accessibility

To make the progress indicator accessible to non-sighted users, a visually-hidden “Loading” message will be automatically included when the value is not set to 100%.

To further improve the experience, applications should have a mechanism to inform users once the loading process is complete. Depending on the criticality of the content and how long it takes to load, the progress completion can be indicated using a live region, or by programmatically moving focus to the top of the new content.

Props

Prop Description Default
value
Progress percentage. Should be a number between 0 and 100.
number
indeterminate
Progress variant. If true, value will be ignored.
boolean
false if value is provided, true otherwise
status
Status of Progress. Positive status always has 100% value.
"positive" | "negative" | "warning"
size
Size of the progress indicator. Defaults to medium size.
"" | "small" | "x-small" | "large"
''
children
Content shown inside progress indicator.
ReactNode
as
"symbol" | "object" | "div" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 158 more ... | FunctionComponent<...>