Progress & Meter

Native <progress> and <meter> elements styled by @primus/ui-core. No classes required — just standard HTML attributes.

Preview · Progress and Meter

Code

HTML · @primus/ui-core

<!-- Basic progress bar -->
<progress value="65" max="100"></progress>

<!-- Colour variants -->
<progress value="28" max="100" class="progress-success"></progress>
<progress value="82" max="100" class="progress-warning"></progress>
<progress value="95" max="100" class="progress-danger"></progress>

<!-- Size variants -->
<progress value="65" max="100" class="progress-sm"></progress>  <!-- thin -->
<progress value="65" max="100" class="progress-lg"></progress>  <!-- thick -->

<!-- Indeterminate (no value — shows animated stripe) -->
<progress></progress>

<!-- Meter — browser auto-colours based on low/high/optimum -->
<meter value="0.7" min="0" max="1" low="0.3" high="0.7" optimum="1">70%</meter>
<meter value="742" min="300" max="850" low="500" high="700" optimum="850">742</meter>

React

// No import needed

function UsageBar({ label, value, max, unit = '' }) {
  const pct = (value / max) * 100;
  const cls = pct > 90 ? 'progress-danger'
            : pct > 75 ? 'progress-warning'
            : pct > 0  ? 'progress-success'
            : '';

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between',
        fontSize: '0.8125rem', marginBottom: 6 }}>
        <span style={{ fontWeight: 500 }}>{label}</span>
        <span style={{ color: 'var(--muted-foreground)' }}>
          {value}{unit} / {max}{unit}
        </span>
      </div>
      <progress value={value} max={max} className={cls} />
    </div>
  );
}

// Usage
<UsageBar label="API calls" value={8200} max={10000} />
<UsageBar label="Storage"   value={95}   max={100}   unit=" GB" />

Angular

// usage-bar.component.ts
@Component({
  selector: 'app-usage-bar',
  template: `
    <div>
      <div style="display:flex;justify-content:space-between;margin-bottom:6px">
        <span>{{ label }}</span>
        <span>{{ value }} / {{ max }}</span>
      </div>
      <progress [value]="value" [max]="max" [class]="progressClass"></progress>
    </div>
  `
})
export class UsageBarComponent {
  @Input() label = '';
  @Input() value = 0;
  @Input() max   = 100;

  get progressClass() {
    const pct = (this.value / this.max) * 100;
    if (pct > 90) return 'progress-danger';
    if (pct > 75) return 'progress-warning';
    return 'progress-success';
  }
}

Progress classes

Class	Colour	Use when
(none)	Primary purple	Generic progress, uploads, steps
progress-success	Green	Healthy usage, on-track metrics
progress-warning	Amber	Approaching limits (75–90%)
progress-danger	Red	Critical — limit exceeded (>90%)
progress-sm	—	Thin bar variant
progress-lg	—	Thick bar variant

Meter vs Progress

	<progress>	<meter>
Use for	Task completion, upload %	Scalar measurements within a range
Colour	Controlled by class	Auto-coloured by low/high/optimum
Indeterminate	Yes (no value)	No
Examples	Upload 65%, Step 2/4	Credit score, disk health, conversion rate

Version history

See the Changelog for version history and breaking changes.