Loader

Description

• Animated components bring the Sage brand flow into our products.
• They animate as soon as the user action is initiated and disappear when the content appears.
• Developers can use the prefers-reduced-motion CSS media query to detect a user's system motion preferences, and apply CSS to disable motion if required.

Loader bar animation uses 2 pill-shaped lines (bars).

• The top bar animates along the x-axis with a trim path applied.
• The moving element begins as a dot, which at its peak movement to the right, becomes a line for the duration of its maximum speed, to then reduce to a dot and disappear.

Loader spinner animation consists of 2 thick-stroke circles, one rotating on top of the other with a trim path applied and a clockwise direction.

• The size of the circles will vary depending on use but will scale at these specific proportions which have been defined as part of the exploration of the flow and multiple flow components and experimentations.
• The speed of the rotation defines the length of the spinner. If speed variations are required this should be considered.

The trims and speed are variable making the animation less mechanical and more human.

Downloads

GIF

Lottie (JSON)

Technical details

Loader bar

Animating on the x-axis from left to right, the line begins as a dot of equal diameter based on the width of the stroke.

| | | | --- | --- || | Step 1 | Step 2 | Step 3 | Step 4 | | --- | --- | --- | --- | --- | | | 00 ms | 1000 ms | 1667 ms | 2000 ms | | X position | x = 50.82, -0.02, 0.67, 1.00 | x = 191.18210.21, 0.75, 0.90, 0.88 | - | x = 2530.17, 0.00, 0.42, 1.00 | | Trim path | 0.01%0.73, 0.00, 0.83, 1.00 | 35%0.33, 0.00, 0.67, 1.00 | -0.17, 0.00, 0.83, 1.00 | - |

Step 1. The dot fades in 200 ms as dot begins to move right and trim path starts increasing from 0.1%.

Step 2. The dot is at line maximum length, trim path at 35%. Position is 191.2 pixels.

Step 3. Trim path is at 0.1%.

Step 4. X position 253 pixels.

Loader spinner (ring)

Using a combination of a clockwise rotation and a start and end trim path, each loop of the spinner takes 1600 ms.

| | | | | --- | --- | --- || | Step 1 | Step 2 | Step 3 | Step 4 | Step 5 | Step 6 | Step 7 | Step 8 | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | | 00 ms | 00 ms | 483 ms | 800 ms | 883 ms | 1317 ms | 1600 ms | 1583 ms | | Rotation | - | -360°0.27, 0.13, 1.00, 1.00 | - | 0°0.36, 0.17, 0.62, 0.82 | - | - | 360°0.00, 0.00, 0.83, 0.95 | 356.987°0.35, 0.45, 0.81, 0.90 | | Trim path | - | 90%0.11, -0.29, 0.85, 1.00 | 65%0.11, -0.29, 0.85, 1.00 | - | 90%0.33, 0.00, 0.56, 1.00 | 65%0.70, 0.00, 0.67, 1.00 | 90%0.11, 14.84, 0.85, 0.78 | 87.2%0.35, 0.40, 0.86, 0.66 |

Step 1. The spinner fades in very quickly over 200 ms.

Step 2. The spinner ring end is at 100%. The start trim path is at 90% and -360°.

Step 3. The spinner ring start is at 65% with ease-in-out.

Step 4. Rotation is at 0° and a full rotation has completed with ease-in-out.

Step 5. The spinner circle returns to 90% with ease-in-out.

Step 6. The spinner circle start is at 65% with ease-in-out.

Step 7. The spinner circle returns to 90% and the rotation is at 360° both with ease-in-out.

Step 8. The loop is created by leaving out the last frame (1600 ms) which is replaced by the first frame (00 ms). The last frame is at 1583 ms.  

Step 9. The motion loops until interrupted and then fades out very quickly over 200 ms.

Labels

Processing

• Includes creating, editing, deleting, saving, copying, sending, and uploading data.
• Use a meaningful label to help the user understand that processing is ongoing.
• The processing label should correspond to the trigger label.
• For example, when a user selects a button labeled Save, the waiting state should be labeled Saving...

Loading

• Displays content on a page.
• This can be new content on an empty page, updated content in existing components, or new content in new components alongside existing components.
• The loading label should almost always be Loading...

Extra information

• If processing or loading takes longer than a few seconds, make sure to add extra information to clearly describe what's happening, why it's taking this long, and how long the user can expect to wait.
• This helps reduce user anxiety and prevents any doubt about whether the system is working.
• Provide this extra information below the processing or loading label, if space allows.

Requirements

Users should be able to:

• Understand that a process is ongoing and they need to wait.
• Perceive the loader both visually and using assistive technology.

Interactions

Loaders are non-interactive and do not require user input.

Design Considerations

• Users should be able to understand that a process or state is loading, and as such, loaders should not overlap with other content.
• When loading states are used within buttons, use clear label to describe the process.
• Try not to use a loader without a visible text label describing the state, as some users may not understand the purpose of some loader types.
• Ensure a 3:1 minimum contrast ratio between the loader and the content background.
• Make sure that animations are not too fast and do not flash.
• This may cause adverse reactions for users with vestibular disorders.

Development Considerations

• Screen reader users should be informed of loading states.
• Use role=”status”or aria-live="polite" for non-blocking loaders.
• Use aria-busy="true" on the container being updated.
• Provide accessible naming to describe the loading state.
• Where a loader is used on a button, ensure that the updated name is relayed to screen reader users.
• Make sure all animated content has a prefers-reduced-motion media query attached to it, so that users who turn on reduced motion settings in the system settings do not see animation.
• Provide a fallback image or text for reduced motion.