Use loader to give feedback about a temporary state, in which no other action is possible, permitting you to differentiate downloading data, a calculation or sending a file, for example, from a possible technical problem.
The loader is a basic element for indicating that something is loading. However, for targeted and/or simultaneous loading, the “dotted” version is preferred.
- Loader is always a temporary state.
- Loader should always be expressed through animation in order to represent the idea of progression.
- Instances of loading should be limited. Technical solutions should be set up in conjunction for data access and availability.
- The title of the loader should explain the actual state of the action that was taken (downloading, sending, calculation, etc.).
- Use simple and concise wording.
- For short downloads, opt for using skeletons when they are available.
- Choose a spinner that shows the percentage for very long downloads.
Loader is mainly used as an overlay on a page or a card while being updated.