Loading indicator

Loading indicator shows the user that an external process, like a connection, is being executed.

Usage

This feedback mechanism is essential for the user to understand that something is happening. Please remember to include it when there is a connection to a server and at the same screen shows the answer to the user.

Please don’t use spinners inside buttons. In case you need a spinner for an action triggered by a button, place the spinner to one of the sides of the button.

Types

TypesDescription
Dotted spinner default
Linear spinner default

Size

Make a responsive usage of the sizes that help the user to understand that something is happening not being aggressive. The context of use will help you understanding the size to use.

SizeDescription
Small10px
Default16px
Medium32px
Large64px
Menu