Fitness and health apps
Activity rings made the circle the way to show a daily goal: you see how close you are without reading a number. With Orbit, rings, gauges and watch faces are a handful of HTML elements, updated by setting a value.
Where it fits
- Goal rings for steps, calories, exercise, water or sleep.
- Live readouts during a workout, like heart rate from a Bluetooth sensor.
- Summary screens with several radial figures.
- Web and PWA versions of an app, without a chart library. Give each ring
role="meter"orprogressbarand its value, and screen readers announce it.
Where it does not
- Trends over days, like weight or sleep history. Use a charting library.
- Route maps and heatmaps.
Start from
Progress ringsThree goals with rounded ends.
Stacked progressThree goals around one center.
180° gaugeA zone readout, like heart rate.
Smartwatch faceLive time with complications.
A daily summary could be three rings at the top, a heart-rate gauge under them and a row of small dials for water, sleep and steps. The Kit rings component does the first part.