cnc-progress-circle
A progress ring, in two modes: one arc driven by progress, or a stack of coloured
arcs driven by segments — "42 done, 18 in flight, 40 to go" on a
single ring. A cut turns either into a gauge.
Quick start
Set progress against the default steps of 100 and you have a
percentage ring. The centre shows that percentage unless you slot something else in.
<div x-data="{ pct: 65 }">
<cnc-progress-circle stroke-color="#0ea5e9" $progress="pct"></cnc-progress-circle>
</div>Usage guidance
Prefer a ring over cnc-progress-bar when the number is the point and the shape is
incidental — a dashboard tile, a quota, a score. A bar reads better inside a flow of
content and at small sizes, where a ring's label has nowhere to go.
Set steps to your real total instead of converting to a percentage yourself.
steps="8" progress="3"
is clearer at the call site than dividing, and the centre label still reads as a percentage.
Give segments explicit colours once they MEAN something. The default palette is ordered for legibility, not semantics, so "failed" will not be red unless you say so — and keep to six, since the seventh is dropped without warning.
The ring sizes itself to its container. Wrap it in a box with a width; radius and
stroke-width
control how thick the ring looks, not how large it is.