Skip to main content
Mat Expressive

MatExpLoadingIndicator

mat-exp-loading-indicator
Component

Material 3 Expressive loading indicator. Renders a continuously morphing and rotating shape that loops through the seven canonical M3 shapes.

All animation work is driven by GSAP – there are no CSS keyframes:

  • Entry – Angular's (animate.enter) event binding hands control to GSAP, which fades the wrapper from autoAlpha: 0 / scale: 0.85 → 1 over ~200ms (power2.out) and calls event.animationComplete() once the tween finishes.
  • Exit – (animate.leave) runs the inverse tween over ~150ms (power2.in); Angular waits for animationComplete() before detaching the element from the DOM.
  • Rotation & shape morph – modelled on the Compose Material3 LoadingIndicator choreography:
    • a continuous linear background rotation on a wrapper <g> (intervalMs × ~7.178 per full revolution, matching Compose's ratio),
    • on top of it, a per-step spring that morphs the inner <path> to the next shape and kicks its rotation by 90°, eased through one of the M3 Expressive spatial spring cubic-bezier presets. The spring's overshoot is what produces the visible bounce at each morph boundary.

Motion tokens live in loading-indicator.animation.ts – the SCSS only ships visual tokens (size, colour, ratio). Override motion globally via provideMatExpLoadingIndicatorOptions or per-instance via the speed input.

prefers-reduced-motion: reduce is honoured on every layer: the entry / exit tweens short-circuit to event.animationComplete(), and the rotation / morph timelines are skipped via gsap.matchMedia().

Inputs

NameTypeDefaultDescription
configMatExpLoadingIndicatorConfig | undefined 'default'

Visual configuration of the indicator.

  • default – renders just the morphing shape.
  • contained – renders the morphing shape on top of a tonal background "container" circle.
ariaLabelstring | undefined 'Loading'

Accessible label announced by screen readers while the indicator is shown.

speedMatExpLoadingIndicatorSpeed 'default'

Speed preset for the shape morph and rotation animation. Each preset maps to one of the M3 Expressive spatial spring tokens (fast, default, slow) – see .

Changing this signal at runtime tears down the active GSAP timelines and re-builds them with the new spring, so the indicator stays in sync with the new motion language without recreating the component.