EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Components    3.11.Progress Indicator

3.11.Progress Indicator

Progress indicators show the user what steps they have completed, how many are remaining, and their current section. Each step is usually numbered or illustrated in a way that shows progression.

3.0.Components      3.11.Progress Indicator      3.11.1.Usage


Progress bars

  • Present the steps orderly from left to right. Indicate to the user that they are performing a multi-step process, and show the direction of movement. Give the user the possibility to return to a previous step to review their data submission.
  • Informing the user of the current status within the process or task provides confidence. This helps the user to know where they are in relation to where they have been, and what sections are to follow. Clear labels should accompany the progress indicator to indicate what the user will accomplish within each step. Keep labels between one to two words.
  • Use validation to confirm that a previous step has been completed.

    Loading graphics

    • Progress indicators inform their users that the website/app needs more time to process the last user action.
    • Daimler uses the "percent-done indicator". It´s a progress indicator that fills from 0% to 100% and never decreases in value.
    • As a general rule of thumb, this element should use a percent-done animation for longer processes that take 10 or more seconds.


Some Image

Example of a progress bar on a survey module

    Some Image

    Example of loading graphics