Progress donut
A tiny resolved-progress ring with an optional count in the centre. Reads "how done" at a glance — the Enquiries tab on a transaction shows resolved enquiries this way. It mounts standalone anywhere a compact "N of a whole" indicator is wanted, and a KoalaTab can render it in place of its count pill.
Canonical
<koala-progress-donut percent="60" count="5" tooltip="3 of 5 resolved" />
percent is clamped to 0–100 and drawn as a green arc; only the arc is
rotated, so the centred count stays upright. tooltip becomes the hover
title — spell out the fraction ("3 of 5 resolved") since the ring alone
doesn't give exact numbers.
States
In a tab
Give a KoalaTab a ProgressPercent
(and a ProgressTooltip) and the donut replaces the chip's count pill, so
the tab reads "how done" at a glance. The tab's Count becomes the centred
number.
new KoalaTab("enquiries", "Enquiries", url, "enquiries", Count: 5,
Icon: IconName.MessageCircleQuestion,
ProgressPercent: 60, ProgressTooltip: "3 of 5 resolved")The Activity chip alongside shows the plain count pill a tab renders without a progress value. (Static render; on real pages the chips stay interactive.) See Tabs for the chip row itself.
Props
| Attribute | Values | Notes |
|---|---|---|
| percent | int | Required. Completion percent, clamped to 0–100 — the filled extent of the green arc. |
| count | int? | Optional count rendered in the centre of the ring (in a tab chip this is the tab's Count). |
| tooltip | string? | Hover title text spelling out the fraction, e.g. 3 of 5 resolved. In a tab chip this is ProgressTooltip. |