Pie display instead of border circle about react-circular-progressbar

[kevinsqi]

Just tried it out and a basic pie display is possible by setting strokeWidth to 50, and tweaking the CSS to be:

.CircularProgressbar-path { stroke-linecap: butt; }
.CircularProgressbar-trail { stroke: transparent; }

Here's an example: https://codesandbox.io/s/7mjzyq9x9x

Does that address your need?

[Offirmo]

Nice but the trail was pretty nice before ;) Your version is not as nice as:

P.S. your lib is amazing.

[kevinsqi]

Thanks, appreciate the kind words!

You can get partway to what you're looking for by setting the background color, e.g.: https://codesandbox.io/s/v81xrrq7k0

However, I don't think there's any built-in way to add the extra border you have there, and I think that's outside the scope of the component itself. You could do it by by overlaying the progressbar on top of some background element that's shaped like a circle though (e.g. an svg circle or a div with 50% border radius), using absolute positioning as demonstrated with #32 (comment), but changing the order of the children so the progressbar is in the foreground instead of background.

Hope this helps.