I used to have to develop multiple progress shapes from scratch when working on FiveM interfaces, whether for speedometers, progress bars, etc.
until I started using a MUCH simpler method.
if the design is in Figma, just ask the designer to create the element as a stroke, preferably with a single color and with the alignment set to INSIDE. Don’t use a fill.
then just copy the element as an SVG and paste it into your code editor.
the SVG will basically come with a <path>. just duplicate that path and, on the second one, add:
stroke-dasharray="100.01"
stroke-dashoffset="50"
pathLength="100.01"
stroke-dasharray and pathLength should always be 100.01. You can then control the progress using stroke-dashoffset.
for example: 50 = 50% progress.
I also set the first path to a lower opacity, creating the progress background and making it much easier to visualize the current value.
the best part is that this method works with many different progress shapes, not just circles: bars, arcs, and pretty much any shape that can be converted into an SVG path.
it might look complicated when you first see the SVG, but once you get the hang of it, it’s MUCH faster to implement.
