Component reference
Loading Indicator
Material 3 Expressive Loading Indicator components to show background activity.
Material 3Web ComponentFramework agnostic
Variants
Loading indicators can be circular or square, and can morph between shapes.
Standard Indicators
Round (Default)
Square
<m3-loading-indicator shape="square"></m3-loading-indicator>Contained Usage
Use the contained variant when placing the indicator inside a button or chip.
Inside Buttons
<m3-button>
<m3-loading-indicator variant="contained" slot="icon"></m3-loading-indicator>
Loading...
</m3-button>♿ Accessibility
- ARIA: Automatically includes
role="progressbar". - Reduced Motion: Respects user's reduced motion preferences by simplifying animations.