Material 3 Expressive’s New Loading Indicator Is Already In Android 16

material-3-expressive’s-new-loading-indicator-is-already-in-android-16
Material 3 Expressive’s New Loading Indicator Is Already In Android 16

The video introducing Google’s new design language starts with a pull-to-refresh animation that turns “Material 3” into “Material 3 Expressive,” with the sequence introducing the new loading indicator.

The loading indicator is a new component with Material 3 Expressive that shows “progress for a short wait time,” specifically less than five seconds. Google recommends it as a “replacement for indeterminate circular progress indicators” that have been updated with M3E to be more distinct (more on that below).

In Material 3 (and M2), progress indicators, as used for pull-to-refresh, were a pretty straightforward loop. 

The M3E loading indicator is a “looping shape morph sequence composed of seven unique Material 3 shapes.” (In general, there are 35.) It’s meant to capture attention and has a circular container with a lighter background color when used for pull-to-refresh.

It can also be used outside of pull-to-refresh without the container. Those on the Android 16 Beta see the loading indicator after a device boot and entering their PIN but before the Pixel Launcher/homescreen loads. 

Besides placing in the middle of a page or container, “loading indicators can be placed within other components, such as buttons, to indicate that the action is ongoing, such as validating a form or checking for updates.”

Another example is in place of the favicon when a browser page is loading:

See also  Want The Best Android Camera Flagship? You Should Wait Till The End Of The Month

Google recommends the loading indicator to “show progress that loads in under five seconds.”

For longer interactions, Material 3 Expressive has updated the linear and circular progress indicators. This update allows them to be thicker in size and have a wavy (versus flat) shape: “The wavy shape can make longer processes feel less static and is best used when a more expressive style is appropriate.” As such, it can be very prominent.

Add 9to5Google to your Google News feed. 

FTC: We use income earning auto affiliate links. More.