The loader and progress bar are similar components, but their usage differs significantly. Loaders are typically used as temporary displays to indicate a transaction or communication between the user and a service. They are particularly useful when the endpoint of the process cannot be calculated or is unknown. For example, loaders are commonly used when refreshing a page.
On the other hand, progress bars are employed when the endpoint of a process is known. They provide more context regarding the progression towards completing a task. For instance, progress bars are suitable for file uploads or an onboarding process where the user can track the advancement of the task.
Loaders inform and engage users during interface waiting periods, indicating backend computing processes, such as loading data or refreshing pages, especially when timing is variable.
Progress bars are linear indicators that show users the completion status of ongoing, user-initiated processes, helping them track the progress and identify if the process is ongoing or complete.
Loader
This type of loader is an animated spinner to indicate a loading state, typically used in cases where the time to load a page is indeterminate.
- Icon: Indicates the loading action; it is available in either a medium (md) or large (lg) size.
- Label (optional): Text displayed below the icon that describes the action taking place
- Action: A button that provides the user with an action during the loading process.
Usage
Loaders facilitate the transition and retrieval of data between states and pages, especially in cases where timing can be variable and may be subject to multiple loading factors. However, only use loaders when you expect a wait time of more than 0.5 seconds. A loader is unnecessary for shorter wait times.
When you use loaders, be sure to establish a hierarchy to show the user where information will display first. If two loaders are present, a user may expect that two independent experiences are loading. If a single loader is present, a user may expect that a single experience is loading.
Variants
| Size | Example |
|---|---|
| Medium |  |
| Large |  |
| Configuration | Description | Example |
|---|---|---|
| Loader with icon | This setup is ideal for situations where you only need an icon to indicate the loading process, without requiring any page context. It's best for loading times that are finite. |  |
| Loader with action button | Incorporate an action button into the loading process to provide users with the option to either reload the page or interrupt the ongoing process. |  |
| Loader with description | This loader configuration includes a description to inform users about the loading content. It's suitable for full-page loading with predictable times. |  |
| Loader with description and action button | This setup includes a description to inform users and allows them to interrupt the current loading state and initiate an action. |  |
Progress bar
This type of filter is a Linear indicator that provides feedback about an ongoing, user-initiated process; a Progress bar shows a user how much of the total process is complete.
- Label: Identifies the operation in progress; labels can he hidden or displayed above or below the Progress bar
- Path: An indicator that displays progress by animating along the length of a fixed, visible track
- Track: A set value that determines the length of the path
Usage
Use a Progress bar to show the length of a process and track its progression toward completion. Progress bars help users identify whether a process is ongoing or complete by tracking the data input. The total progress may or may not depend on the user's input. For example, a user's progression through a course is dependent on the user's input, but uploading a photo is dependent on factors outside of the user's control.
Variants
The Progress bar is available in 4 sizes: extra small (xs), small (sm), medium (md), and large (lg). Choose the size that is more suitable for your design and use case.
| Size | Example |
|---|---|
| Extra small |  |
| Small |  |
| Medium |  |
| Large |  |
Configurations
Label
A label with progress bar is configured to identify the operation shown by the Progress bar. Labels can appear above or below the bar or can be hidden.
- Label on top
- Label on bottom
- No label
Percentage value
A percentage value can be associated with the progress bar to show the progression of system process.
| Percentage Value | Progression |
|---|---|
| 0% |  |
| 25% |  |
| 50% |  |
| 75% |  |
| 100% |  |
| Indeterminate |  |
Path type style
Select a style for your Progress bar that gives the user a visual clue to the status of an operation. Each style displays a different color in the Progress bar that you can configure to tell users how things are progressing.
| Style | Color |
|---|---|
| Initial |  |
| Positive |  |
| Alert | |
| Error |  |
| Interactive |  |
| Pink |  |
| Green |  |
| Orange |  |
| Gray |  |