Progress
Progress bars show completion status for tasks, targets, and metrics. Syhrezz uses thin horizontal bars (4–8px) and SVG circular rings for target achievement display.
Overview
Progress bars are always paired with a label and percentage value. The fill color uses semantic tokens — green for good, amber for warning, red for critical. Gradient fills are used for the Executive dashboard target ring.
When to Use
Use Progress when
- Showing completion percentage toward a goal or target
- Regional or team performance comparison
- Upload, download, or processing progress
- Target cards showing achievement percentage
Don't use Progress when
- Loading state — use a spinner instead
- Binary states — use a checkbox
- Showing a score or rating
Anatomy
1
Wrapper
div.progress-wrap. Contains label row + bar. margin-bottom:12px.
2
Header Row
div.progress-header. display:flex, justify-content:space-between. Contains label (left) + percentage text (right).
3
Track
div.progress-bar. bg:#F1F5F9, border-radius:999px, overflow:hidden. Height: 4px (sm), 6px (default), 8px (lg).
4
Fill
div.progress-fill. Width set via inline style="width:X%". Color via .progress-fill-{color} class. transition:width .5s ease.
5
SVG Ring (variant)
Used in target cards. SVG circle with stroke-dasharray:213.6, stroke-dashoffset = 213.6*(1-pct/100). Rotated -90deg. 80px default size.
States
On Track (>75%)
Green fill
Default (40-75%)
Indigo fill
Warning (25-40%)
Amber fill
Critical (<25%)
Red fill
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| value | number | required | — | Current value. Set via inline style="width:X%" on .progress-fill. |
| max | number | optional | 100 | Maximum value. Percentage = (value/max)*100. |
| color | string | optional | 'indigo' | Fill color. Use semantic colors based on threshold. 'green'(>75%) | 'indigo'(default) | 'amber'(25-40%) | 'red'(<25%) | 'gradient' |
| size | string | optional | 'default' | 'sm'(4px) | 'default'(6px) | 'lg'(8px) |
| label | string | optional | undefined | Label text shown above left. Always pair with a percentage value. |
Accessibility
| Requirement | Implementation |
|---|---|
| role="progressbar" | Add to .progress-bar element. |
| aria-valuenow | Current numeric value. |
| aria-valuemin / aria-valuemax | Always 0 and max (usually 100). |
| aria-label | Describe what is measured: aria-label="Jakarta region completion". |
Behavior
Progress bars are static display elements. They update when the underlying data changes — the fill width animates via transition: width 0.5s ease. No user interaction. Color should update semantically based on the value threshold.
Composition
Allowed
Inside stat cards with label + percentage
Regional performance comparison tables
Target cards with SVG ring variant
Forbidden
As a loading indicator — use spinner
Without a label — always pair with text
With percentage color mismatching fill color
Best Practices
Do
Always pair progress bar with a label and percentage value. Use semantic color matching the fill.
Bar alone lacks context — users need to know what is being measured.
Don't
Use a red fill but show black percentage text, or use progress bars without any labels.
Color mismatch confuses semantic meaning. Unlabeled bars require users to infer.
Content Rules
Good label
Jakarta Region
Names what is being measured. Specific.
Bad label
Progress
Does not identify what is being tracked.
AI Implementation Guide
For AI coding assistants: Progress bars always have a
.progress-wrap parent. Fill width is always set via inline style="width:X%". Use semantic colors: green for >75%, indigo/blue for 40-75%, amber for 25-40%, red for <25%. SVG ring formula: circumference = 2πr = 213.6 (r=34). stroke-dashoffset = 213.6*(1-pct/100). Always rotate SVG -90deg. Always include role="progressbar" with aria-valuenow.Related Components
Design Decisions
Why semantic color coding?
Progress bars in dashboards communicate performance at a glance. Using green for high, amber for moderate, and red for low creates an instant visual signal without reading the percentage. This follows established dashboard conventions in enterprise software.
Why SVG ring instead of CSS border-radius ring?
SVG stroke-dashoffset provides precise control over the fill amount with smooth animation. CSS-only circular progress is brittle and harder to animate reliably across browsers. The SVG approach also supports accessible aria attributes naturally.
Changelog
v1.0.0July 2026Added
- Linear bars in 3 sizes + SVG circular ring for target cards
- 5 semantic color variants with threshold guidance
- transition: width 0.5s ease on fill element