Skip to content
All effectsForms

Step Flow

The connector fills before the next number lights.

Pure CSSFormsPro

Usage

123

Meant for

StepperFormPlan Step

Examples

On a Stepper

A step lights, then its connector fills toward the next one. The connector starting after the step is the causality — run them together and the stepper reads as a progress bar. The Stepper's circles carry data-wm-step, its connectors data-wm-connector, each with its --wm-i.

The class is wm wm-step-flow — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.