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  The Garmin Dash Cam 67W Drops Back To Its All-Time Low Price!

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.