Illustrations and photographs may load and transition in three
phases at staggered durations, rather than relying on opacity shifts.
Combine opacity, exposure, and saturation changes to suit your needs.
Exposure levels are adjusted for low-contrast and desaturated color. Once opacity reaches 100%, the final stage includes full-color saturation.
A lower-contrast effect combines a shift in gamma and black output for darker images.
Opacity: 0% start, 100% end
Exposure: Gamma, Black output (for darker images)
Saturation: 0 or 20% start, 100% end
Low opacity and low contrast
Full opacity and exposure
Color saturation
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.
Load and transition animation
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
Adding 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