A 400 by 4 capsule where the empty part is the full part at a fifth of the strength - two halves of one colour, and five samples along a continuum.
One component, five variants
Progress - Percent: 0 · 25 · 50 · 75 · 100 - 400 × 4, radius.full, the fill 0 to 400 wide
Using the Progress
Why is the rail not a grey?
Because it is the fill. Both halves are base.primary and the rail simply carries it at 20 percent, so the empty part is always a quiet version of the full part rather than a grey borrowed from the neutral ramp. It also means the bar keeps working if you retheme: change one token and both halves move together.
Why does a 4px bar need clipping?
Because radius.full on something 4 tall is most of what you see. The fill is a capsule inside a capsule, and without the clip a square-ended fill would poke past the rounded end of the rail at 100. The component clips its content for that one pixel.
Are the five variants states?
No, they are samples. Percent is 0, 25, 50, 75 and 100 along a continuum, and in a real screen you set the fill width to whatever the number happens to be - the page here lets you drag it anywhere to make that obvious. The five exist so a designer can drop in a plausible bar without doing arithmetic.
Where are the label and the percentage?
Not in the kit, and deliberately. The source names five parts and the kit publishes two of them: ProgressTrack and ProgressIndicator. The track and the indicator are a drawing; the label and the readout are text you write. Every usage example on this page is that pair with a line of your own copy above it.