A clear representation that content is loading or in progress of change


Explaining the loading state

⭐️ While a generic 'loading' works as a fallback, a more specific explanation is a fun opportunity e.g. 'adding your contacts, syncing your emails'


Determine how long the time between two actions must be to require a loading component

⭐️ Don't interrupt two actions that instantly transition, but if there's a known 5 second period between two actions then the component is appropriate


Ensure your loading state can be clearly seen

⭐️ A container behind the loading icon ensures accessibility if the loading is happening over a screen containing content

Optional additions

Not always necessary, but they can have their perks!

Brand visuals and illustrations in animation

Incorporate an illustration or animation that draws back to your brand - this can distract a user's attention while a page loads