Progress bar with rounded corners?

Question

I am trying to achieve this progress bar design:

The current code that I have produces this:

This is the code:

Answer 1

How to make the progress shape a bit smaller?

You need to give the progress item a little padding, like so:

How to make the progress bar to be curved as per design?

Replace the element, with . That will make the shape keep its form as it grows - and not cut off. Unfortunately, it will have a little unwanted visual effect at the beginning - as the shape corners don't have enough space to draw. But it might be good enough for most cases.

Full code: