Progress

A glass-styled progress bar with color variants.

Preview

Usage

<div class="glass-progress">
  <div class="progress-fill" style="width: 65%;"></div>
</div>

<!-- Color variants -->
<div class="glass-progress">
  <div class="progress-fill success" style="width: 85%;"></div>
</div>
<div class="glass-progress">
  <div class="progress-fill warning" style="width: 45%;"></div>
</div>
<div class="glass-progress">
  <div class="progress-fill error" style="width: 25%;"></div>
</div>

Structure

Element / Class	Purpose
`.glass-progress`	Track container (8px tall, pill-shaped)
`.progress-fill`	Inner fill bar (set width via `style` or JS)
`.progress-fill.success`	Green fill
`.progress-fill.warning`	Orange fill
`.progress-fill.error`	Red fill

CSS Details

Track: background: rgba(0,0,0,0.08), pill-shaped, inset shadow
Fill: Animated width transition (0.4s spring easing), specular inset highlight
Default fill color: --glass-accent