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.

Loaders

There are three Loader types.

1. Linear Determinate

A horizontal progress bar that visually communicates the real-time status of a system-level process with a known duration or measurable completion value. Used in non-interactive system feedback that is not tied to a user journey or step-by-step flow.
Best used for file uploads or downloads, data syncing or importing/exporting, software or system updates, report or export generation.

2. 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 (loading transactions, messages, account details), initial connection to a server, software or app updates, or form submission.

3. Progress Circular Indeterminate

A looping, animated circular spinner that visually communicates that a process is happening, but does not and cannot 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.

Interactive Demo

This demo lets you preview progress indicators, variations, and configuration options.

Loading preview
Open in Storybook

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.