1. Add the `Circular Progress` element to your mobile page. 2. Set `Fill` to a number between `0` and `100`.
3. Use `Prefill` if you want the ring to animate from a different starting value.
4. Turn on `Animate on load` if the ring should animate when it first appears.
5. Turn on `Animate when fill changes` if the ring should smoothly update when the `Fill` value changes.
6. Customize the ring under `Ring Style`, including stroke width, progress color, track color, rotation, sweep angle, and line caps.
7. Use `Arc sweep angle` below `360` to create gauge-style progress instead of a full circle.
8. Enable `Show cap dot` if you want a dot at the progress tip.
9. Use the dash fields if you want a segmented or dashed ring.
10. Enable `Show label` to display text inside the circle.
11. Choose `Label mode`: `percent`, `value`, or `custom`.
12. Use workflow actions when you need to update progress dynamically: `Set fill`, `Animate to fill`, `Re animate`, `Reset`, or `Stop animation`.
13. Use exposed states in workflows or text elements, such as `current fill`, `target fill`, `progress ratio`, `is animating`, and `is complete`.
14. Use events like `pressed`, `animation started`, `animation completed`, and `fill changed` to trigger workflows.