OverlayNew
Progress ring
A circular progress ring that fills from 0 to a maximum with the value large in its centre, and turns to the warning colour past a limit.
- Version
- 1.0.0
- Added
- 23 October 2026
- Films
- Not used in a film yet
Parameters
| Name | Type | Default | Range | What it does |
|---|---|---|---|---|
| value (Can change over time) | number | 62 | -1000000000000 to 1000000000000 | the value the ring shows; give a follower of the counter, (v) => v, to make it fill with the filmCan change over time |
| min | number | 0 | -1000000000000 to 1000000000000 | the value of an empty ring |
| max | number | 100 | -1000000000000 to 1000000000000 | the value of a full ring; a value past it shows the ring full |
| show | choice | value | value, share | the centre writes the value with its unit, or its share of the range as a percent |
| limit | number | 20 | -1000000000000 to 1000000000000 | the value at which the ring turns to the warning colour; set it beyond the ends for never |
| warnWhen | choice | below | above, below | turn to the warning colour when the value is above the limit, or below it (what is left) |
| label | text | REMAINING | – to 40 | a word under the value; empty for none |
| unit | text | % | – to 12 | written after the value |
| decimals | integer | 0 | 0 to 4 | decimal places of the value |
| format | choice | grouped | grouped, plain, compact, scientific | how numbers are written: 12,500 / 12500 / 12.5k / 1.25×10⁴ |
| start | number | 0 | -180 to 180 deg | where the ring starts, in degrees from the top (0 is 12 o’clock) |
| direction | choice | clockwise | clockwise, counterclockwise | which way it fills |
| ticks | integer | 0 | 0 to 72 | small ticks around the ring; 0 for none |
| ends | choice | round | round, flat | the fill’s ends: rounded or square |
| at | vec2 | 0.86, 0.7 | 0 to 1 | the ring’s centre: across and down the frame; a ring near an edge slides in |
| radius | number | 0.13 | 0.05 to 0.4 | the ring’s outer radius, a share of the frame’s height |
| size | number | 0.028 | 0.015 to 0.06 | the height of its label and unit, a share of the frame’s height; the value is larger |
| thickness | number | 0.03 | 0.008 to 0.1 | the ring’s width, a share of the frame’s height |
| ink | color | #f3f0e8 | – | ticks, words and numbers |
| accent | color | #4fb8e8 | – | the live value and what has been reached |
| warn | color | #ff6b4a | – | danger: past a limit |
| font | choice | sans | sans, serif, mono | the face of its words and numbers |
| backing | number | 0.35 | 0 to 1 | how dark the soft panel behind it is; 0 for none |
| reveal | number | 0.8 | 0 to 5 s | how long it takes to draw in; 0 shows it at once |
Use it in a film
film.js
elements: { 'ring-gauge': { value: 62, min: 0 } }Use it from your agent
Ask your agent to put it in a film. It finds the element by name.