Guidelines

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:

  1. Loading dot animation.
  2. Skeleton loaders.
  3. 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…

You contacted this pro.

Waiting to hear back.

Example 2. A smaller piece of content is being loaded on an existing page.

Share your project.

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.

Projects

Popular services

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

Was this page helpful?

We use this feedback to improve the quality of our documentation.