Intro to UI Loaders

Understand how to inform users about the loading process without frustrating them unduly

Visual Design

8 exercises

Loaders signify that a process is ongoing in the background and that users should wait for it to complete. They are especially useful in scenarios where the user might experience a brief wait, such as when a webpage is loading, content is being retrieved from a server, or an application is processing a complex task. They provide a clear signal to users that the application has not frozen and is actively working on their request. This improves user experience by preventing confusion or frustration.

Indeterminate loader

Indeterminate loaders are looped animations without a clear progress indication.^[1] Use such loaders for activities shorter than 5 seconds. Avoid using them for longer processes as longer looped loaders tend to frustrate users.

Circular loader

Circular loaders or spinners, as indeterminate loaders, are effective for tasks lasting 1-5 seconds, maintaining user engagement without becoming intrusive.

Even so, avoid full-page loading spinners because they offer little sense of progress. You can, however, use them on a smaller scale, inline along with components like table rows or for post-click actions on buttons.

Text loader

A text loader is a brief label that lets users know about ongoing loading processes. It is also best suited for loading times under 5 seconds. While a text loader may seem plain on its own, adding a playful animation enhances its visual appeal. Consider incorporating subtle, engaging animations like pulsating dots, a scrolling ellipsis, or a color transition to make the loading experience more dynamic and less monotonous. Ensure the animation complements your overall design aesthetics and doesn't overshadow the text.

Also, keep in mind that the text loader label should not just be decorative. It should inform users about what is happening or what will come next.

Determinate loader

Determinate loaders display a measurable progression, offering users a clear indication of the task's completion.^[2] Common shapes include horizontal progress bars or circles that fill gradually.

Use determinate loaders for tasks with predictable durations over 10 seconds, such as large file uploads. Design them with a clear endpoint, allowing users to track progress easily. Consider adding percentage labels for precision. For instance, a horizontal bar could represent file upload progress, visibly filling as the upload completes, accompanied by a percentage display.

Pro Tip! For loading processes that take more than a minute, let users know if it is okay to leave the page and come back later so they may switch to other tasks.

Skeleton loader

Skeleton loaders are placeholders that mimic the structure of content while it's being loaded, reducing perceived wait times and frustration.^[3]

Image skeleton loaders: Display a blurred or simplified version of the image, gradually replaced by the actual image as it loads.
Text skeleton loaders: Show placeholders resembling text blocks, progressively filling with content.

A recommended practice is to load only what's currently visible to users, lazy load more content as they scroll, and use skeleton loaders to maintain a seamless user experience during this transition.

Pro Tip! Neutral colors like light grey work great for skeleton screens.

Progress indicators within interactive elements

Progress indicators within interactive elements like buttons or icons provide immediate feedback to users, showing that an action is in progress. A circular indicator, for example, can be integrated into a button to clearly signal that a task is being processed and that the button cannot be clicked again until the task is complete. This visual cue helps users understand the current state of their action without confusion.

These indicators are ideal for short, indeterminate activities lasting between 2-5 seconds. For instance, when submitting a form, a button with a spinning circle can indicate that the submission is in progress. This keeps the interface clean and provides a direct link between the interaction and the specific item being processed.

For longer activities, other methods like snackbars or notifications are more suitable.^[4]

Place loaders strategically

Where should you place loaders? Here are 3 options:

Near the action: Place loaders adjacent to or inline with buttons or elements that initiate a process, such as submit buttons. This immediate proximity links the loader directly to the user-initiated action.
Close to content: Place them close to or overlay them above the loading content, such as images or text, minimizing confusion.
Centered or aligned: For full-page loaders, position them at the center. This indicates that the entire page is undergoing a change.

No matter which position you choose, ensure loaders are within the user's viewport, making them visible and maintaining user awareness of ongoing processes.

Designing custom loaders

Loaders present a unique chance to shape users' perception of time, alleviating frustration and enhancing the overall experience. Experimentation with animations, while staying on brand is a great idea.

To design a custom loader:

Consider whether your loader will be determinate, providing users with a clear endpoint, or indeterminate, signaling ongoing processes.
Determine the appropriate duration, balancing the need for prompt feedback with the natural pacing of the task.
Create animations that align with your brand identity, maintaining a cohesive visual language.
Ensure the loader communicates relevant information about the ongoing task, using elements like progress bars or percentage indicators when applicable.

Test the custom loader in different scenarios, gather user feedback, and iterate to refine its effectiveness and contribution to an enhanced user experience.