A progress ring is a single stroked circle whose dash equals its circumference. Set stroke-dashoffset to circumference × (1 − percent) and the arc fills. One formula, endless dashboards.
Rotate the ring group -90° so 0% starts at the top (12 o'clock) instead of 3 o'clock. stroke-linecap: round gives the soft fill end.
Use only part of the circle by making the dash pattern cover a fraction of the circumference. Here the arc spans 270° with a track behind it.
A gauge is the same trick with two dashes: one segment "on" for the value, the rest "off", and the whole circle rotated so the gap sits at the bottom.