Loaders
Loaders provide system feedback about the duration and progression of a system status, such as a download, file transfer, or installation to indicate how long a user will be waiting. They are used to reassure the user that the system is working and communicates actively while waiting for a response to change.
On this page
Best Practices
Use Loaders
- To indicate that a process is ongoing, such as data loading, form submission, or network requests
- Provide additional context with a text label like “loading” to help users understand the nature of the task
- Use for short durations, ideally under five seconds. For longer tasks, consider providing additional feedback to set expectations
- Include accessibilityLabel that relates to the specific part of the product where it is being used
Don’t Use Loaders
- Don’t use Loaders
- For unclear or long processes. Instead, provide more meaningful feedback so that users don’t feel lost in indefinite wait
- Avoid using more than 1 on a page. Too many on a page can confuse the user and slow down the overall experience
- Display a loading label adjacent to Spinner when the label is redundant
- Forget to localize the label
- For data visualization
Variations
Linear Determinate
75%
Linear Indeterminate
Progress Circle Indeterminate
| Variations | Description |
|---|---|
| Linear Determinate | A horizontal progress bar that visually communicates the real-time status of a system-level process with a known completion value. Best used for file uploads or downloads, data syncing or importing/exporting, software or system updates, report or export generation. |
| Linear Indeterminate | A looping animated horizontal bar that continuously moves to indicate the system is working, though the exact duration or progress cannot be determined. Best used for progress that cannot be measured and where the system is waiting for a response, such as page loading, first load of an app or feature where APIs are being called, initial connection to a server, software or app updates, or form submission. |
| Progress Circular Indeterminate | A looping, animated circular spinner that visually communicates that a process is happening, but cannot and does not indicate how much progress has been made or how long it will take. Best used for initial app or screen loading, waiting for a network request, processing a form submission, transitioning between views. |
Recommendations
Usage
Do this
- Use when system progress is measurable (for instance: bytes transferred, steps completed)
- Use loaders when the user will be waiting and needs reassurance the system is working
- Update the loader state as the task evolves (for example, from “preparing” to “uploading”)
Don’t do this
- Don’t use for measurable tasks - switch to a Progress Tracker instead
- Don’t overuse loaders - not everything needs a spinner or a bar
- Mislead - inaccurate or vague loaders damage trust
Layout
Do this
- Place the loader near the task it’s associated with - visual proximity builds clarity
Don’t do this
- Don’t use without context - users need to know what is progressing (for example, exporting a report)
- Do not block the UI unnecessarily: a loader is typically a passive indicator
Timing
Do this
- Use subtle feedback or no Loader at all for near-instant tasks
- Skip the loader entirely for operations under 500-800 ms
Don’t do this
- Avoid using for operations that finish almost instantly: a loader that appears and disappears in a flash can confuse users
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.