Loader

Usage

A loader alerts a user to wait for an activity to complete.

We have defined three different level of loaders to be used on three different use cases:

In-page Loader When Starting an Application

The loader is shown as company symbol, when starting an application for the first time. It’s always centred in the middle of the visible screen and the size is fixed on 78px width / 60px height.

The loading action is visually performed as a loop of a linear colour gradient of all the corporate colours.

Visual Specs

• Horizontal linear gradient 90° - from left to right

• On deep purple background

• Gradient pattern: white-magenta-sky blue-turquoise-white

Timing Specs

• Indeterminate loop until loading time is completed • Starts after 0.10 seconds

• Transition between colours every 0.40 seconds

This loader has 2 intermediate states that contain text and button:

State 1

When loading time takes longer than 1 minute, but the page is still loading.

Text Specs

• Open Sans, centered, 16px, Blue D30

Timing Specs

• Starts while the company symbol still loops

• Text fades in, duration 0.80 seconds

State 2

When loading time takes longer than 1 minute, and the page won’t load anymore.

Text Specs

• Open Sans, centered, 16px, Blue D30

Timing Specs

• Starts when the DH logo stops on white

• Text + button fade in, duration 0.80 seconds

Large Spinner

• This loader appears when data is being validated, saved or fetched.

• It can be placed on a page level, and on a module level inside containers, on charts and graphs.

• It’s sizes are fixed as per component. The spinner should only be used once on a page.

Timing Specs

• Indeterminate Loop until loading time complete

• Complete spin in 0.40 seconds

Small Spinner

This loader appears when data is being fetched on a component level. It can be used as following:

• Inside dropdown menu or date picker on their disabled status, accordingly replacing their icons on the right.

• Inside single uploader on their progress status, placed on the left before the file name.

• Inside buttons, in every size and state, fully substituting the label of the button

Visual Specs

• The colour of the spinner is already setup as per component

Timing Specs

• Indeterminate loop until loading time is completed

• Complete spin in 0.20 seconds