M3 Loading Indicator Examples
Download Back To CSSScript.Com
Add a Material Design 3 morphing loading indicator to your React/Vue/Svelte/Vanilla JS project with seven animated shape transitions and canvas rendering.
Size96 px
Shape Ratio0.79
Speed1.00x
Indicator Color#d9ff66
Container Color#262c1e
Rendering Variants
Shape Sequence
Core Options
sizeSets the CSS pixel size of the canvas.
colorSets the fill color of the morphing shape.
sizeRatioControls how much of the canvas the shape occupies.
speedChanges the animation speed multiplier.
pausedFreezes the animation loop while preserving the current frame.
containedDraws a circular background behind the indicator.
containerColorSets the contained variant background color.