Recipes
Step Counter
Galaxy Watch-inspired step counter with circular progress arc
A Galaxy Watch-inspired step counter with a circular progress arc, auto-incrementing step count with the signature continuous odometer roll, and dynamic weekday activity indicators.
The circular progress ring uses the SVG strokeDasharray/strokeDashoffset technique. A 240-degree partial arc is created by setting the dash array to the arc length and gap length, then strokeDashoffset controls how much of the arc is filled. With a CSS transition on the offset, the ring animates smoothly in sync with NumberFlow's digit roll as steps tick up.