Loading images¶
Images, including illustrations and photographs, may load in three phases.
Behavior¶
- Progressive fade-in
- Duration
- Animation
Duration¶
Use longer durations for loading images, and shorter durations for transitions.
Usage¶
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.
Larger screens¶
This process is ideal for larger screens, such as loading the Chrome OS wallpaper.
Behavior¶
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.
Duration¶
A longer duration is recommended for loading images, and a shorter duration is recommended for transitions.
Animation¶
Add a small position shift to loading images. The background image shown here in the account switcher animates in horizontally.