Loaders
What to show users when there’s a delay.
Loading animations let the user know that content is on the way. Because we’re asking the user to wait, we want to be consistent, limit this delay and, where possible, preview the content that’s about to load.
Loading types
There are three loading types recommended for use in Thumbtack products:
- Loading dot animation.
- Skeleton loaders.
- For native apps only, the operating system loader.
1. Loading dots
This is our standard loading animation. It should be used when if we need to keep the user on the page or when smaller pieces of an existing layout is being generated. Use the blue loading dots over white whenever possible.
Pro Photos
Super Duper Photography
Danny’s Wedding Photos
Photos 4U
- Loading
Example 1. An action was triggered and we prevent further actions with a scrim. Use the light scrim token to create this UI.
- Loading
Calculating…
Waiting to hear back.
Example 2. A smaller piece of content is being loaded on an existing page.
It’s better to have a few pros look into the job.
Example 3. A button was clicked and we we’re waiting for data.
2. Skeleton loader
When the layout of the content to be rendered is known in advance — for example, a list of avatars with names and descriptions — studies indicate that skeleton loaders can reduce the user’s perceived loading time.
3. Native loader
In cases where content is loading from the device in Thumbtack’s native apps, for example, a “pull down to refresh” or retrieving location settings, we can rely on the native loading animation.
iOS
Android