🏆 Nominate Checklist Design as Product and Design Tool of the Year now!

Loading

Component

Features

Each visible item to be shown on this page.

Icon

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

Text

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'

Time

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

Accessibility

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