The bar is a --gray-6 track with radius 6px and 2px of side padding; segments are flex-grow: 1, so any step count fills the tray. Ahead of you they are --gray-5; behind you, flat --blue-1; the one you are on takes a 70° --blue-1 → --blue-1-shimmer → --blue-1 gradient at 200% 100% background-size, swept over 4s linear — slow enough to read as "in progress", not as loading. Outer padding is --tray-body-padding on top and sides and 0 at the bottom, so it sits flush above the step content. size="large" only changes the segments: 8px tall, 3px radius. The source honours prefers-reduced-motion with animation: none !important, and so does this twin. Note the keyframes differ from Pill's shimmer: this one sweeps −200% → 200%, Pill sweeps 0% → 200%.

The source draws it with two stacked conic-gradients — a 0–90° arc in color over a full circle in secondaryColor — then punches the middle out with radial-gradient(farthest-side, transparent calc(100% − Npx), black calc(100% − Npx)) as a mask. That is why the arc is an exact quarter turn at any thickness, which a border-top-color ring cannot do. The gradients and mask are inline in Spinner/index.tsx because they depend on the props; the stylesheet holds only the 50% radius, inline-block, vertical-align: middle, line-height: 0 and the 0.9s linear spin. Defaults are size 16, thickness 2, Color.Black arc on a Color.Gray5 track.

Four affordances, and they are not interchangeable. FormProgress is position in a flow, never loading. LinearLoader — three 6px dots, 8px apart, opacity 0.25→1→0.25 over 0.9s at 0 / 0.3 / 0.6s delays — belongs inside a Button (loading replaces the label with it) and defaults to --white because that is where it lives. Spinner is the small inline ring for a label or icon slot, 16px by default. Skeleton is for content whose shape you already know: 3px radius, flat --loading-bg, both dimensions defaulting to 100% so it fills its parent. Skeleton's fill does not animate — the animated sweep is Pill's shimmer modifier.