Loading indicator shows the user that an external process, like a connection, is being executed.
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 | Description |
|---|---|
| Dotted spinner default | |
| Linear spinner default |
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.
| Size | Description |
|---|---|
| Small | 10px |
| Default | 16px |
| Medium | 32px |
| Large | 64px |