Progress indicators are an important way to provide feedback to users when a process is taking place. Common examples are loading the app when data is being fetched, or a process is taking place—such as export, saving, or payment.
Types of loading indicators
We have three types of progress indicators:
When to use
Progress bars
Bar progress indicators are helpful when the waiting time is expected to be long—5 seconds or more. Having a determinate state provides more incentive for users to stick around for longer.
Animated circle loaders
Circle progress indicators are helpful for shorter wait times and perfect for more confined spaces, e.g. buttons.
Placeholders
Placeholders are essentially pulsing shapes like rectangles, circles, or squares that are designed to mimic content that is being fetched visually. They’re helpful for large sections where the structure of the content is roughly known, e.g. lists, masonry grids.