Progress

.talos-progress is a thin square HUD bar — no chamfer, no chrome. The fill is driven entirely by one animatable custom prop, --talos-value (0–100), on the .talos-progress__bar: the number is the geometry, so the same markup reads as a value gauge or, with --indeterminate, a scanning loader.

Determinate

<div class="talos-progress">
  <div class="talos-progress__bar" style="--talos-value:68"></div>
</div>

Set --talos-value (0–100) on the bar; width is calc(var(--talos-value) * 1%). The fill is --talos-accent with an accent glow, and width transitions smoothly because --talos-value is registered with @property.

Indeterminate

<div class="talos-progress talos-progress--indeterminate">
  <div class="talos-progress__bar"></div>
</div>

Add --indeterminate to the container. The bar’s own width is ignored; a bright accent segment on the ::after scans left→right (the talos-scan keyframe). Under prefers-reduced-motion the sweep parks as a static centred segment so the busy state stays legible.

Sizes

<div class="talos-progress talos-progress--sm"><div class="talos-progress__bar" style="--talos-value:42"></div></div>
<div class="talos-progress"><div class="talos-progress__bar" style="--talos-value:42"></div></div>
<div class="talos-progress talos-progress--lg"><div class="talos-progress__bar" style="--talos-value:42"></div></div>

Track height only: --sm is 4px, default is 8px, --lg is 14px.

Classes