Progress
The .pl-c-progress component renders a linear progress bar. Determinate mode
shows a fill proportional to a value; indeterminate shows an animated sweep.
Semantic HTML
<!-- Determinate -->
<div class="pl-c-progress">
<div class="pl-c-progress__bar" style="inline-size: 65%;"></div>
</div>
<!-- Indeterminate -->
<div class="pl-c-progress" data-indeterminate>
<div class="pl-c-progress__bar"></div>
</div>Class contract
| Selector | Role |
|---|---|
.pl-c-progress |
The track (rounded bar). |
.pl-c-progress__bar |
The fill (animates width). |
[data-tone] |
success, warning, danger (default = accent). |
[data-indeterminate] |
Animated sweep mode. |
--pl-c-progress-height |
Track height token (default 0.375rem). |