Progress and activity indicators communicate the status of a transaction to the user.
- A progress bar is a track that fills up from left to right to show the progress of a task.
- Progress bars are used for tasks that have a specific number of steps.
- Spinner is a type of activity indicator that appears when whole page loads.
- Skeleton Loader shows a loading state and displays as skeleton makeup of a component.
- Use progress bars for tasks that can be broken down into a specific number of steps.
- Ensure the progress bar clearly shows the filled and unfilled state.
- Ensure the progress bar fills up to 100% when the task is complete.
- Progress bars can be integrated with tabs that fall in a sequence to add interactivity and allow the user to jump back to a previous step.
Click the prototype to interact with it
- Use a spinner for unquantifiable tasks such as loading a page or more content.
- Include a label to give additional context.
- Keep the indicator animated for the entire duration of loading time and remove the spinner when loading is complete.
Use Spinners when:
- Users complete an action, and the system is “thinking” or “processing” the information
- The entire page needs to be reloaded at once
- There have been multiple changes, and the user needs to be aware of them
- Loading times are slow
Skeleton Loader (also known as “App Shell”):
- Include screen reader friendly text notifying the user the app is loading.
- Should only appear for a moment before content reaches the page.
- Provide a timeout or error message in the case of content taking too long or failing to arrive on the page.
- Multiple loaders can be combined onto one screen to give sense of the page’s architecture before loading is complete.
Use Skeleton Loader to:
- Give a loading state for one component, so the user can still access the rest of the content on the page
- Provides context to users, so they know what to expect after the component is loaded
- Maintains the final layout of the page, so elements won’t jump around when the still-loading component is complete
“The page using skeleton screens scored higher on average for both perceived speed and ease of navigation. However, people using the page with spinners found the article faster when entering the site for the first time. Giving users access to the rest of the page while one element loads improves usability and performance.” – The effect of skeleton screens: Users’ perception of speed and ease of navigation
- Are fun and engaging when used appropriately within a brand’s tone of voice, but they can be difficult to maintain and scale
- Only use a custom loader when it doesn’t interrupt the user’s task, and when users benefit from calling their attention to it.
- Same accessibility criteria applies
- Provide screen-reader friendly text notifying the user the component or page is “loading” when the spinner appears.
- Announcement occurs once and does not repeat while the component is in the loading state.
- Accurately explain the state of the requested action. For example, “Loading”, “Submitting”, “Processing”. Use as few words to describe the state as possible.
Skeleton loader / App Shell
- When the component that is loading is navigated to, screen-reader friendly text will notify the user the component is loading.
- User is able to navigate to other areas of the page while the component is loading.