

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:
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.
What’s your reaction?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Leave a Reply
View Comments