Donut Progress Ring

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Value *

  value · number

  The figure the arc sweeps to and the centre counts to. This is the shot, one number, under four digits reads best.

  now: 78

• Max

  max · number

  The value that fills the ring completely. Leave at 100 for a percentage; set it to a quota or a headcount to show 'value of max' as a share of a full turn.

  now: 100

• From

  from · number

  Where the arc and the count start. 0 reads as 'filling up'; a nearby value reads as 'moving' and keeps the gesture short.

  now: 0

• Suffix

  suffix · string

  Unit set after the figure at just under half its size, quiet: '%', 'x', 'k', 'GB'. Empty string for a bare figure.

  now: %

• Decimals

  decimals · number

  Fixed decimal places on the centre figure. 0 for a clean percentage; 1 when the last digit is the point of the shot.

  now: 0

• Label

  label · string

  Small uppercase mono line at the top left, what the metric is. Two to five words; it sits above a hairline that frames the card.

  now: New ARR · annual target

• Caption

  caption · string

  Quiet mono line inside the ring, under the figure: the absolute numbers behind the share. Keep it to about five words or it crowds the well.

  now: €4.2M of a €5.4M goal

• Footnote

  footnote · string

  Bottom-left mono line: the period, the source, the caveat. One short clause. This is the fine print, not a second caption.

  now: Fiscal Q3 · updated weekly

• Target

  target · number

  Optional threshold, in the same units as `value`. Draws a notch across the track and a readout bottom right; the notch resolves to the second accent the moment the arc passes it. Omit for a bare gauge.

  now: 70

• Target label

  targetLabel · string

  Wording for the target readout, e.g. 'Target', 'Goal', 'Q3 pace'. Set in uppercase mono next to the figure.

  now: Q3 pace

• Thickness

  thickness · number

  Track stroke width, as a fraction of the gauge's overall footprint. 0.03 reads as a hairline dial, 0.085 as a donut, 0.16 as a heavy band. A thicker track leaves less room in the well, and the figure shrinks to fit it.

  now: 0.085

• Ticks

  ticks · boolean

  Draw the graticule outside the track, ten minor ticks plus a longer one at twelve o'clock marking zero. Turn off for a plainer, softer card.

  now: true

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate