Loading Spinner

Estimated reading: 5 minutes 189 views

Overview of Loading Spinner component

Loading Spinner is a component that helps to notify users or give visual feedback about system performance. The component displays progress by animating the indicator along an invisible circular track in a clockwise direction.

Loading Spinners is used to communicate:

that action is being processed,
data is being retrieved,
content is loading,
the system performs lengthy operations,
synchronizing complex data,
performing slow computations,
other system processes.

Spinner as a progress indicator is Indeterminate and doesn’t provide an estimation of the time the system needs to complete the operation. Therefore, this component should be used for unquantifiable tasks and can be applied directly to a surface of content areas or other components.

Principles

Loading Spinner expresses an unspecified wait time.

A Spinner spins permanently while a task is performed.

Microcopy

A descriptive Label for the action is optional but recommended for automatic or system-triggered actions.
The Label should describe the state of the action being performed. For example, if the status is active and action is performed, the Label should speak in the progressive form: “Saving…”, “Storing…”.
Once the action status changes to finished, the Label should change. For example, when saving is finished, it would read “Saved.”
If the loading status changes to an error, then the Label should change to tell the user that an error or failure has occurred.

Usage

Due to the nature of the Loading Spinner, it should only be used for operations that require a short wait time of up to 5-10 (five to ten) seconds and generally do not interrupt the user’s flow or block the user from progressing through the User Interface.

A loading spinner should be used only if the wait time is anticipated to be longer than 2 (two) seconds. A spinner that only flickers quickly into view can confuse the user.

A 100 ms delay should occur before showing a spinner to mitigate unnecessary spinners showing up at the same time when load times are minimal.

The Spinner should be displayed in the same area and contextual level where the processing takes place and maintain the exact alignment. For example, if only the Loader indicates that data is being retrieved for a specific content area, the Spinner must be displayed in that same area.

Optionally, a descriptive visual Label can be provided with the Loading Spinner to indicate the system action and give people clarity in case the process is supposed to take a while. For example:

Uploading data…
Storing document…
Saving changes…

In most cases, this may be unnecessary, as the animation of the control indicates that the system is performing the action. If a spinner appears when people initiate a process, a label is usually unnecessary. Designers should decide about the Label for automatically initiated processes or if it needs to be clarified what the system is doing at the moment.

A spinner must be centered horizontally and vertically within the container. Without first applying a light or dark mask, Spinners should not be placed directly over text, components, or other visual elements on a page.

The system should not change a Loading Spinner to a Progress Bar in the middle of the process. Spinners and Progress Bars have different shapes and sizes, so transitioning between them can disrupt the interface and confuse people. Designers should carefully pick the type of Loader based on the actual system behavior.

Loading Spinners are perceived to be slower than actual and make loading appear slower. They should be limited in use and applied only if they can improve user experience but not harm it. If possible alternative approaches should be used. Designers may provide additional content or valuable information to people while the system is performing an action.

Sizes

Size	Value	Usage
Small	16 px	Used with Inputs, Labels, or inside other smaller UI elements.
Medium	24 px	Used within larger visual elements, like Overlays.
Large	32 px	Indicates larger components are loading, like a Data Grid.
Extra large	64 px	Indicates a large content area of the UI is loading.

Accessibility

The Loading Spinner’s color contrast and background must comply with AA Level contrast ratios.

Loading Spinner must be placed in a container to ensure accessibility, regardless of background type.

If the Loading Spinner is on its own, a visual version should be appropriate for light/dark backgrounds.

Multiple simultaneous Loading Spinner can be very confusing for assistive technologies. Designers should consider using only one Spinner at a time and giving that one Spinner the most accurate possible Description.

The Loading Spinner must be given a Description to explain the loading event. When creating Loading Spinner, Designers must provide developers with loading text value for the Description for loading and loading finished text value for the Description for loading finishing.

Descriptions should not be too detailed and must use generic words or phrases 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. 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 the Description being read twice.

For screen readers, the information on what action is taking place / what the system’s state is should be provided.

Implementation

The Implementation Guidelines are available for internal use only. To access the live demo and code snippets, you need to be logged in to any DocuWare account on this browser:

Log in to the DocuWare account
Update the page

DocuWare Design

Loading Spinner

Overview of Loading Spinner component

Principles

Microcopy

Usage

Sizes

Accessibility

Implementation

CONTENTS

Loading Patterns

Alerts

Banners

Bias-Free Language

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input