Progress

A horizontal progress bar driven by the --progress custom property. Supports determinate and indeterminate states, with role modifiers to color the bar.

Determinate

<div class="ln-progress">
  <div class="ln-progress__header">
    <span class="ln-progress__label">Uploading</span>
    <span class="ln-progress__value">65%</span>
  </div>
  <div class="ln-progress__track">
    <div class="ln-progress__bar" style="--progress: 65%"></div>
  </div>
</div>

Indeterminate

<div class="ln-progress ln-progress--indeterminate ln-progress--success">
  <div class="ln-progress__track">
    <div class="ln-progress__bar"></div>
  </div>
</div>

Progress role colors

<div class="ln-progress ln-progress--success" style="margin-bottom: 8px">
  <div class="ln-progress__track">
    <div class="ln-progress__bar" style="--progress: 80%"></div>
  </div>
</div>
<div class="ln-progress ln-progress--warning" style="margin-bottom: 8px">
  <div class="ln-progress__track">
    <div class="ln-progress__bar" style="--progress: 50%"></div>
  </div>
</div>
<div class="ln-progress ln-progress--danger">
  <div class="ln-progress__track">
    <div class="ln-progress__bar" style="--progress: 25%"></div>
  </div>
</div>

Reference

Class	Description	Responsive
`.ln-progress`	Progress bar container	No
`.ln-progress__header`	Label and value row	No
`.ln-progress__label`	Progress label text	No
`.ln-progress__value`	Percentage or fraction text	No
`.ln-progress__track`	Background track	No
`.ln-progress__bar`	Filled bar (set width via `--progress`)	No
`.ln-progress--xs`	4px track height	No
`.ln-progress--sm`	8px track height	No
`.ln-progress--md`	16px track height	No
`.ln-progress--indeterminate`	Animated indeterminate state	No