ProgressIndicator Component

Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen.

Determinate indicators display how long an operation will take. Indeterminate indicators visualize an unspecified wait time.

Example of usage

Import like this:

// Theme provider required to use TDC colors/font
import { ThemeProvider } from '@material-ui/core';
import { themeTdcErhverv } from '@tdcerhverv/mui-theme';

...

import { ProgressIndicatorCircular } from '@tdcerhverv/progress-indicator';

Use like this:

<ProgressIndicatorCircular loadingLabel="Loading" />

Props

ProgressIndicatorCircular

Spreads the default CircularProgress props.

export interface StyledCircularProgressProps extends CircularProgressProps {
  loadingLabel?: React.ReactNode;
}

ProgressIndicatorLinear

Spreads the default LinearProgress props.

export interface StyledLinearProgressProps extends LinearProgressProps {
  loadingLabel?: React.ReactNode;
}

Useful links

• Material UI
• Figma / Shared Components / Material Components / ProgressIndicator
• Zeroheight