Progress

Used to visually represent the state of completion of a task or process

Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.

Best practices

Do

Use progress components to show that an extended or inbetween action is taking place.

Don't

Use multiple progress components on one page at a single time.

Do

Place linear progress where it will make less visual disruption. At the top for of pages and tables, and bottom for flyout menus.

Don't

Use linear progress inside of table cells or for inbetween states such as modals and dialogue pop ups.