Stage Morph
One shape carrying three states: the width animates between them, the label and glyph pairs cross-fade, and the tick draws itself on arrival rather than appearing. The three widths are declared in the CSS; a width morph that adapts to arbitrary label text needs one measurement in JavaScript, which this does not do.
Usage
DeployDeployingDeployed
Meant for
Examples
On a Button
Idle, working, done in one control. The three widths are set on the button as --wm-w1/2/3 — CSS cannot measure a label, so the widths are declared rather than discovered, and the tick draws itself instead of appearing.
The class is wm wm-stage-morph — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.