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<...> |