A timeline is a visual indicator that shows progress and might guide the user through specific processes or pre-defined steps while also showing current progress.

Design Guidelines

Timeline should set an expectation for the whole process by breaking it up into concrete steps and a pre-determined goal. It shows the user their progress along the steps of the timeline with a current step. For all of the steps, a timeline can provide additional information such as a header (timestamp), an icon showing state, a title and a description that optionally includes related contextual actions.

Layout

There are two types of layouts, horizontal and vertical.

Horizontal
  • Used when there are workflows of 3 - 5 steps
  • Used when all steps can be displayed without wrapping
Vertical
  • Used when there are workflows greater than five steps
  • Used when timestamps are optional

Timeline Step States

Every timeline step has one of five steps. With one exception these steps are represented with a Clarity Icon. The exception is for loading state which uses the clr-spinner component.

  1.   - Step complete uses the success-standard shape
  2. - Current step uses the dot-circle shape
  3. - Not started, available to start uses the circle shape
  4. Fetching data - Processing user initiated action uses the clr-spinner (w/ clrMedium size) component
  5. - Error completing step uses the error shape

Showing the current step

By default, step one is highlighted as the current step.

When step one is complete the step two gets highlighted.

When steps one and two are complete, step three gets highlighted.

All steps are complete.

Additional States

Error
  • Display the error message under the error icon if needed
  • Tooltips are not recommended because of low affordance
Loading
  • When loading or taking action, display a spinner
  • Disable buttons when loading or make buttons contextual for the loading state (e.g CANCEL)

Step Description

It is optional to have a step description that offers additional information and guidance to the user. This information can be displayed all of the time or only for the current step.

Single step description
All step descriptions

Code & Examples

Structure

A Timeline is structured as a container component with classes placed on the correct DOM structure to target elements for timeline specific style and layout. Te first container element is an unordered list element with .clr-timeline class. Each list item corresponds to a step that has the .clr-timeline-step class on it. Steps are composed with several children elements. Timelines can be either horizontal or vertical and it is specified by the css class declared with the .clr-timelineelement.

Each timeline step can have three children elements:

  1. An optional header (.clr-timeline-step-header) that appears above the timeline when its horizontal and to the left of the timeline when its vertical. In the demos they are populated with times. e.g 11:59am.
  2. An icon shape that corresponds to the correct step state (note usage of aria-label for accessibility):
    • : Step complete uses the success-standard shape
    • : Current step uses the dot-circle shape
    • : Not started, available to start uses the circle shape
    • Loading... : Processing user initiated action uses the spinner shape
    • : Error completing step uses the error shape
  3. A container element for the .clr-timeline-step-body that contains two children elements:
    • A .clr-timeline-step-title for calling out the step title below the step icon when horizontal and on the right at the top of the step when it is vertical
    • A .clr-timeline-step-description
    • to put a longer description that wraps with the width of the step container. This is also where (optional) action buttons will be placed.

CSS Classes (for Clarity UI static implementation)

Classname Description
.clr-timeline Designates the timeline container element and is used on an unordered list ul. This class should only contain li children with the clr-timeline-step class.
.clr-timeline-vertical Used in conjunction with clr-timeline class to designate a vertical timeline.
.clr-timeline-step A class to designate a step container. It should be placed on an li element as a child of the clr-timeline class.
.clr-timeline-step-header Used to display information like a time or a date. This element will appear above the ClarityIcon used in the time line step when its a horizontal timeline and to the left when it is a vertical timeline.
clr-timeline-step-body This is a container class used to group the .clr-timeline-step-title and .clr-timeline-step-description elements. This element will appear below the ClarityIcon used in the timeline step when its a horizontal timeline and to the right when it is a vertical timeline.
.clr-timeline-step-title Used inside of the clr-timeline-step-body container this is a bolded title that describes the step.
.clr-timeline-step-description This element contains a longer description and details about the step it is used on. This is also where consumers should place any action buttons that may be used in this step.

Examples

Lets look at some of the elements in isolation and then put everything together at the bottom of the page.

Timeline

Timeline Step

Timeline Step Body

Summary of Options (for Angular implementation)

Full Demo