Patterns Loading images

Loading images

Images, including illustrations and photographs, may load in three phases.

Illustrations and photographs may load and transition in three phases by staggering opacity, exposure, and saturation levels.

Behavior

Progressive fade-in
Duration
Animation

Duration

Use longer durations for loading images, and shorter durations for transitions.

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Illustrations and photographs may load and transition in three phases at staggered durations, rather than relying on opacity changes alone. You may combine image opacity, exposure, and saturation changes to suit your needs.

Exposure adjustments

Images should begin loading with low contrast levels and desaturated color. Once image opacity reaches 100%, display the image with full-color saturation.

Opacity, exposure, and saturation recommendations for loading images

Opacity: 0% start, 100% end
Exposure: Gamma, Black output (for darker images)
Saturation: 0 or 20% start, 100% end

Full opacity and exposure

Color saturation

Larger screens

This process is ideal for larger screens, such as loading the Chrome OS wallpaper.

Animation showing loading on larger screens for Chrome OS wallpaper

Behavior Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Progressive fade-in

Visualize the image fading in, like a print during the photo development process.

Don’t adjust the levels in a way that will overexpose the lighter values.

Do.

Don’t.

Duration

A longer duration is recommended for loading images, and a shorter duration is recommended for transitions.

Load and transition animation

Animation

Add a small position shift to loading images. The background image shown here in the account switcher animates in horizontally.

Video showing adding animation