Progress & Gauge

Linear progress bars and radial gauges, both driven by a single --value (and --max for gauges) with a --color fill. Gauges support data-variant="semi" and data-thresholds zones. Each value is shown as text, so the figure reads without color. No JavaScript.

Progress bars

Project Completion
Design phase
100%
Development
65%
Testing
35%
Deployment
0%

Gauges

Performance Metrics
75% CPU Usage
92 Score
68 Speed

Gauge with threshold zones

System Health
Green = good, yellow = warning, red = critical
85% Healthy

Markup

<!-- linear progress: --value (%) fills the bar, --color tints it -->
<div class="casca-progress" style="--value: 65%; --color: var(--casca-color-1)">
  <div class="casca-progress-bar"></div>
  <span class="casca-progress-label">65%</span>
</div>

<!-- radial gauge: --value of --max; data-variant="semi" or data-thresholds -->
<div class="casca-gauge" style="--value: 75; --max: 100; --color: var(--casca-color-1)">
  <div class="casca-gauge-value">75%<span class="casca-gauge-label">CPU</span></div>
</div>