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
Last updated
