progress-bar
Renders a labeled progress bar, either with a fixed value or calculated live from a date range.
(Last Edited)
::progress-bar renders a horizontal progress bar. You can either set a fixed
percentage with value, or let it calculate the current progress automatically
from a start / end date range.
Maps to the <ProgressBar /> React component via the kebab-case → PascalCase
directive convention. The time-based variant is a client component — progress is
calculated on mount.
Reference
::progress-bar{value=42} ::progress-bar{value=42 label="Task completion"}
::progress-bar{start=2025-01-01 end=2025-12-31 label="Year 2025"}| Attribute | Type | Required | Default | Description |
|---|---|---|---|---|
value | number | No | — | Static progress percentage (0–100). Mutually exclusive with start / end. |
start | string | No | — | ISO date string for the start of the period. Requires end. |
end | string | No | — | ISO date string for the end of the period. Requires start. |
label | string | No | — | Optional label displayed above the bar on the left; percentage is always shown. |
When both start and end are provided, value is ignored. If the current
date is before start the bar shows 0%; after end it shows 100%.
Examples
Static value
::progress-bar{value=35 label="Reading list"}Reading list35%
No label
::progress-bar{value=70}70%
Full (100%)
::progress-bar{value=100 label="Shipped"}Shipped100%
Time-based — current year
::progress-bar{start=2026-01-01 end=2027-01-01 label="Year 2026"}Year 20260%
Time-based — project window
::progress-bar{start=2026-01-01 end=2026-06-30 label="Q1–Q2 project"}Q1–Q2 project0%