Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Progress indicator

An expanding green line that supports the perception of how far along the user is in a flow.

Guidelines

Short description

The purpose of the component is to support the user's perception of progress. 

When and how to use it

The progress indicator is best used on less complex flows with 3-5 steps. The user can stay within the same context, unlike the wizard that demands the user's full attention.

Behaviour

Each click in the flow generates a step in the indicator. The step where the user is or has been to, is green (filled). The steps where the user has not been to, are grey. The confirmation step is green to indicate a completed flow, and also comes with a green check.

All steps should be the same length. This component is not clickable.

The component can come with a lable that says which step the user is on ("Step 2/3"), placed directly under the progress indicator.

The indicator is placed at the top. Note that the colour (Dark Green 1) is chosen as to not visually merge with the SEB logo box. 

Do's and don'ts

  • Always place the component at the top under the logo bar.
  • If the flow is too long or too complex, use a Wizard take over.
  • Avoid adding more than five steps.

Examples

Specification

Measurements

  • Height: 8 px
  • Width: Full width 
  • White gap between steps: 2 px

States

Colours

  • Filled step: Dark green 1
  • Unvisited step: Grey 200

Page last updated

Feedback

Was this page helpful?