Progress
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.
Both halves are base.primary; the rail just carries it at a fifth of the strength. That is why a progress bar needs no second colour and stays legible on any surface - the empty part is always a quiet version of the full part, never a grey borrowed from somewhere else.
The bar is 4 tall with radius.full, so both ends are round and the fill is a capsule inside a capsule. At 4px that rounding is most of what you see, which is why the component clips its content - a square-ended fill would poke out of the rail at 100%.
Percent is 0, 25, 50, 75 and 100 - samples along a continuum rather than a set of states. In a real screen you set the fill width to whatever the number is; the five exist so a designer can drop in a plausible bar without doing arithmetic.
The axis is a sampler, not a limit
Drag it anywhere. Nothing about the component changes between 37 and 38 percent - only the width of the fill - which is exactly why the file draws five and stops rather than pretending to enumerate a hundred.
A bar on its own says very little
The kit draws the track and the indicator; the label and the readout beside them are yours to add, and without at least one of them a bar is just a moving line. These are the four arrangements that turn it into something a person can read.
The source names five parts - Progress, ProgressLabel, ProgressValue, ProgressTrack and ProgressIndicator - and the kit publishes the last two. That is the honest split: the track and the indicator are a drawing, while the label and the readout are text you write, and every example above is that pair with a line of your own copy above it.
One component, five variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Progress
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.
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.
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.
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.