Guidelines for using progress and loading indicators.

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 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.