Use the progress indicator to present the status of an ongoing action by showing actual progress of the action and how much time remains until its completion.
- Always present the status via a shape being filled up, but also with a numerical percentage.
- Choosing between the linear or circular version is an esthetic choice linked to the available space in the interface.
- The progress indicator must always be linked to the completion of a user’s action (validation workflow, the status of a form, etc.)
- Do not use the progress indicator for loading a page or contents. Rather, opt for the Loading element.
- Do not use the progress indicator to represent the various stages of an action to perform. In this case, opt for the Stepper element. As for the progress indicator, it will allow you to represent the progress in a more global manner (in a synthetic card, for example, if the action is completed asynchronously).
The progress indicator must be placed so as to immediately create a link to the action whose level of completion it is supposed to represent.