Looking at the code, the design is mostly done in CSS: the obvious border-radius for the circles, :before pseudo-classes for the origin, and rotate transformations along with transitions for the animated arrow. Circle sizes are based upon the css subclass.
The jQuery only sets the colors and the arrows' angle.
Having a tiny bit of JS and having no JS at all is worlds apart. I edited the DOM in my inspector to try to add arrows and change percentages, but nothing happened after I injected new elements.
Had this been entirely in CSS, it would have automatically rendered immediately after modifying the DOM.
It's not really possible to do what you want to do (at least not without generating a CSS rule for every possible percentage value), but you can get damn close by calculating the right rotation (apparently "percent * 1.8 - 90") and setting the "transform" properties yourself.
The jQuery only sets the colors and the arrows' angle.