Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerPrinciplesAccessibilityUsage and variationsDemos & APILogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Loading spinner

StableAccessible

Loading spinner is used for notifying users that their action is being processed or data retrieved from server.

The loading spinner do not provide details about nature of the processing but it reassures the user that their action is being processed.

Principles

  • Use the loading spinner only if the wait time is anticipated to be longer than three seconds. A spinner that only quickly flashes in view can confuse the user.
  • Display the loading spinner in the same area and contextual level where the processing is taking place. For example, if only the loader indicates that data is being retrieved for a specific content area, display the spinner in that same area.
  • If possible, provide a descriptive visual label for the action being processed with the loading spinner.

Accessibility

  • The colour contrast between the loading spinner and its background must comply with AA Level contrast ratios. You can find more information about accessible color combinations in Colour design token documentation.
  • Multiple simultaneous loading spinners can be very confusing for assistive technologies. HDS Loading spinner React component is built in a way that only reads one alert for screen readers - even if there were multiple on the screen. If you are unable to use this feature or it fits your needs poorly (e.g. your project does not use JavaScript), please consider using only one spinner at a time and giving that one spinner the most accurate possible description.
  • HDS Loading spinner must be given labels to describe the loading event. Use loadingText prop for description for loading and loadingFinishedText prop for description for loading finishing.
    • Descriptions should not be too detailed. You should use generic descriptions such as "The page content is loading" and "The page content loading was finished".
    • If there are multiple spinners on the screen, they all must have identical descriptions. Remember that the description is read to screen readers only once.
    • If the spinner also has a visual label, it can be hidden from assistive technologies to avoid description to be read twice.

Usage and variations

Basic loading spinner

The loading spinner comes in two sizes:

  • Medium (64px) is used for larger content areas and for full-screen loading
  • Small (24px) can be used for indicating more local changes in content.

Core:
<div class="hds-loading-spinner">
<div></div>
<div></div>
<div></div>
</div>
<div class="hds-loading-spinner hds-loading-spinner--small">
<div></div>
<div></div>
<div></div>
</div>
React:
<LoadingSpinner />
<LoadingSpinner small />

Customized loading spinner

The colour of the spinner can be customised to fit the colour theme of the service. HDS Loading spinner even supports shifting between multiple colours. Colour shifting should be used sparingly and only if the theme of the service calls for it.

Note! When using multicolor loading spinners, at least half of the colors must have sufficient contrast 3:1 against the spinner background.


Core:
<!-- Single color -->
<style>
.hds-loading-spinner.custom-single-color {
--spinner-color: var(--color-tram);
}
</style>
<div class="hds-loading-spinner custom-single-color">
<div></div>
<div></div>
<div></div>
</div>
<!-- Multi color -->
<style>
.hds-loading-spinner.custom-multi-color {
--spinner-color-stage1: var(--color-coat-of-arms);
--spinner-color-stage2: var(--color-tram);
--spinner-color-stage3: var(--color-metro);
}
</style>
<div class="hds-loading-spinner hds-loading-spinner--multicolor custom-multi-color">
<div></div>
<div></div>
<div></div>
</div>
React:
<LoadingSpinner
theme={{
'--spinner-color': 'var(--color-tram)',
}}
/>
<LoadingSpinner
multicolor
theme={{
'--spinner-color-stage1': 'var(--color-coat-of-arms)',
'--spinner-color-stage2': 'var(--color-tram)',
'--spinner-color-stage3': 'var(--color-metro)'
}}
/>

Demos & API

Core

Loading spinner in hds-core

React

Loading spinner in hds-react

Loading spinner API