Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Progress indicator

Process indicator offers a clear way to inform user about the completion of a specified process.

last modified: 10/06/2021 14:55:04

Overview

Use progress indicator to help user to keep track of their progression. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.


Anatomy

Progress indicator can display up to 7 steps. If the process contains less that 7 steps, they will occupy the whole width of their container. If more than 7 steps, the indicator will truncate a portion of the steps, depending on the user's progression.

  1. Step title
    Indicate the name of the step. Use clear and concise labels to facilitate user's understanding (e.g.: delivery method, document upload)

  2. Progression bar
    Provides an additional hint about the progression, depending on its location, it can have 3 states:

    • Completed
    • Ongoing
    • Next
  3. Progress step
    Displays the step number and status.

  4. Tooltip
    Shows the name of a given step on hover (or tap on mobile), it gives some context about passed and future steps.

  5. Truncation indicator
    When the tasks takes more than 7 steps, the steps are truncated to keep a reasonnable amount of steps displayed on the screen.


Behaviour

Less than 7 steps

Steps will spread horizontally to take up the full width of the container.

More than 7 steps

Depending on the progression of the user, truncation can happen at the beginnning, the end or both ends of the progress indicator.

  • When the user is at the first 5 steps of the process, the truncation happens at the end of the component.

  • When the user is in the middle of the process not close enough to display the 5 first ones, not far enough to display the 5 last ones. The truncation happens on both ends.

  • When the user have already performed enough steps to display the last 5 ones. The truncation happens at the beginning of the progress indicator


Best practises

  1. Logical progression
    Display the steps in order from left to right. Indicate to the user that they are performing a multistep process, and show the direction of movement. Allow the user to return to a previous step to review their data submission via a previous at the end of the current screen

  2. Indicate the current step
    Keeping the user informed of where they currently are within the process or task at hand will give them a sense of control. 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.

  3. The endowment progress effect
    Improve tasks completion rate by starting at step 2 with a step one already completed.

  4. Validation
    Use validation to confirm that a previous step has been completed. If the user cannot proceed onto another step without first completing a task, display a disabled button at the end of the task.


Related elements

Progress indicator vs. Timeline

Progress indicator offers an indicative information about the progression of the user within a multi step task. Whereas timeline is more adapted to offer the user an interactive set of elements to indicate a chronology of events. (e.g. tickets follow up, informative content about processes, etc.)

More infos about the timeline

last modified: 30/09/2021 11:10:06

Sizes and colors

Negative moe

The progress indicator is only available for the default mode (positive). If you need the negative version, please contact us.

last modified: 08/09/2022 10:20:06

Default progress indicator

Accessibility

  • rs-progind div must have an explicite aria-label attribute;
  • The current step must have an explicite aria-current attribute;
  • rs-progind-el must have an explicite tooltip.

Razor

@rsProgind objects can receive all following optionnal parameters in this exact order:

Parameter Default value if nothing is set
"Titles" "Title 1, Title 2, Title 3"
Current step "1"
"Title tag name" "div"
"extra class" ""


Long progress indicator

Limited display

The limit of displaying steps in the progress indicator is 7. Therefore, you need to crop it. Add a span tag with rs-progind-ellipse class inside the concerning li tag.

Truncation at the end of the progress indicator

If the user is at the first 5 steps, the truncation happens at the end of the component.

Truncation at the start of the progress indicator

If the user is at the last 5 steps, the truncation happens at the beginning of the component.

Truncation at both sides of the progress indicator

If the user is in the middle of the process, the truncation happens at the both sides of the component.


Statuses type

You have 3 possible statuses for the progress indicator:

  • rs-progind-item rs-done : completed;
  • rs-progind-item rs-selected : ongoing;
  • rs-progind-item : next / todo.
last modified: 16/09/2022 12:45:14

Configuration metadata

Selector: lib-progress-indicator

Class: ProgressIndicatorComponent

e2e testing Id: None

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name Type Default Required Description
id string undefined No Component id
stepTranslations string[] undefined Yes The translations for each steps
numberOfSteps number undefined Yes Set the number of steps for efficiency
currentStep number undefined Yes The current step. Initial step is 0.

Outputs

None

Models

None