Docs / Progress

Progress

vel-src: progress.css

Progress bar component for showing completion state. Supports all semantic colors, size variants, striped, shimmer, indeterminate, and glow effects.

ClassProperties
vel-progressBase progress track — full width, rounded, surface background
vel-progress-barThe filled inner bar; set width inline (e.g. style="width:60%")
vel-progress-primaryPrimary gradient fill on the bar
vel-progress-successSuccess green fill on the bar
vel-progress-dangerDanger red fill on the bar
vel-progress-warningWarning amber fill on the bar
vel-progress-infoInfo blue fill on the bar
vel-progress-smThinner track height
vel-progress-lgTaller track height
vel-progress-stripedDiagonal stripe pattern overlaid on the bar
vel-progress-shimmerAnimated shimmer sweep across the bar
vel-progress-indeterminateAnimated bar that loops without a fixed width
vel-progress-glowAdds colored glow box-shadow beneath the bar

Examples

Basic progress at 60%

example.html
<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-progress">
    <div class="vel-progress-bar vel-progress-primary" style="width:60%;"></div>
  </div>
</div>

Color variants

example.html
<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;flex-direction:column;gap:10px;">
  <div class="vel-progress">
    <div class="vel-progress-bar vel-progress-primary" style="width:75%;"></div>
  </div>
  <div class="vel-progress">
    <div class="vel-progress-bar vel-progress-success" style="width:50%;"></div>
  </div>
  <div class="vel-progress">
    <div class="vel-progress-bar vel-progress-danger" style="width:30%;"></div>
  </div>
  <div class="vel-progress">
    <div class="vel-progress-bar vel-progress-warning" style="width:65%;"></div>
  </div>
</div>

Striped progress

example.html
<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-progress">
    <div class="vel-progress-bar vel-progress-primary vel-progress-striped" style="width:70%;"></div>
  </div>
</div>