Components/Progress Indicator

The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.

**Use the progress indicator if:** - You need to visually show a current status. - You need to visually strengthen a current status. - You need to make different states comparable to each other at a higher level. - You want to show custom values as well as percentages. **Do not use the progress indicator if:** - Visual feedback is needed for an ongoing operation. Use a busy indicator instead. - The progress is indeterminate. Use a busy indicator instead. - You want to display a single value in the form of a fillable shape or a group of shapes that describe their context. Use the status indicator instead. **Use the progress indicator if:** - You need to visually show a current status. - You need to visually strengthen a current status. - You need to make different states comparable to each other at a higher level. - You want to show custom values as well as percentages. - Visual feedback is needed for an ongoing operation. Use a busy indicator instead. - The progress is indeterminate. Use a busy indicator instead. - You want to display a single value in the form of a fillable shape or a group of shapes that describe their context. Use the status indicator instead.

Show the current progress as a percentage value between 0% and 100%. Alternatively, you can show the current progress as text in addition to the bar. In this case, the text is shown on the right of the bar if the progress is 50% or less. In all other cases, the progress is shown right-aligned on the bar itself You also have the option of showing any application-specific text instead of a percentage.

The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, error, and information.

If the length of the text exceeds the available space in the progress indicator, the text truncates. In this case, clicking the progress indicator displays an information popover with the full text.