Timeline
A timeline displays a series of events which can guide the user through processes or pre-defined steps while also showing current progress.
Usage
Timeline sets 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.
Use a timeline:
- When the workflow requires the full content area to show information
- For content with distinct higher-level stages
- When the user needs clear progress indication
- For workflows with complex steps
- For workflows between 3 to 5 steps for horizontal timeline; 5+ steps for vertical
Types
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
- 11:59 amAdd KMS Root CA certificate requested.
- 11:59 amAdd KMS Root CA certificate requested. Upload it to the KMS to complete the connection.
- 11:59 amLoading...Make vCenter trust KMS Root CA certificate requested. Upload it to the KMS to complete the connection. Third sentence is very long and very long.
- 11:59 amMake KMS trust vCenter Upload it to the KMS to complete the connection. Third sentence.
- 11:59 amConnected No. It's not connected.
Vertical
- Used when there are workflows greater than five steps
- Used when timestamps are optional
- 11:59 amAdd KMS Root CA certificate requested.
- 11:59 amAdd KMS Root CA certificate requested. Upload it to the KMS to complete the connection.
- 11:59 amLoading...Make vCenter trust KMS Root CA certificate requested. Upload it to the KMS to complete the connection. Third sentence is very long and very long.
- 11:59 amMake KMS trust vCenter Upload it to the KMS to complete the connection. Third sentence.
- 11:59 amConnected No. It's not connected.
Anatomy
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
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.
Success Step complete uses the success-standard shapeSuccess Current step uses the dot-circle shapeSuccess Not started, available to start uses the circle shape- Loading... Processing user initiated action uses the clr-spinner (w/ clrMedium size) component
Success Error completing step uses the error shape
Behavior
Showing the current step
As users move through the timeline steps should be progressively marked with the current and success icons to indicate progress.
Error State
- Display the error message under the error icon if needed
- Tooltips are not recommended because of low affordance
Loading State
- When loading or taking action, display a spinner
- Disable buttons when loading or make buttons contextual for the loading state (e.g CANCEL)
Angular Component
Besides a static HTML/CSS Timeline component, we also offer a fully interactive Angular version of the component. So if you are using Angular, you can use the ClrTimeline
component. By using ClrTimeline
, you'll be able to leverage its interactive behavior and features out-of-the-box. If you would like to learn more about how to customize its default interactive behavior, please refer to the API tab.