Intro to UI Loaders
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
Circular
Even so, avoid full-page
A 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
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
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
- 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
Pro Tip! Neutral colors like light grey work great for skeleton screens.
Progress indicators within interactive elements like
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]
Where should you place
- 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 asimages 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.
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
References
- Material Design | Material Design
- Material Design | Material Design
- Progress indicators – Material Design 3 | Material Design