Add background <circle> element, to allow inverted colors

[Kikobeats]

First of all, nice component!

I need to use it using a background color for the round, and a white or semi transparent line.

Because the component is drawing just the line, how to do that?

something like that: https://codepen.io/web-tiki/pen/qEGvMN

[kevinsqi]

yea we'd need to add a new <circle> element in order to do that, which doesn't exist yet. Seems pretty reasonable to add.. I can look into it but PRs are welcome too.

[andreysaleba]

Hey, I've submitted PR with the <circle> element. Can you check it - #23 ?

[kevinsqi]

This is now available in v0.4.0! Example usage:

JSX:

<CircularProgressbar
  className="inverted"
  background
  percentage={66}
/>

CSS:

.CircularProgressbar.inverted .CircularProgressbar-background {
  fill: #3e98c7;
}

.CircularProgressbar.inverted .CircularProgressbar-text {
  fill: #fff;
}

.CircularProgressbar.inverted .CircularProgressbar-path {
  stroke: #fff;
}

.CircularProgressbar.inverted .CircularProgressbar-trail {
  stroke: transparent;
}

You can also use a backgroundPadding prop to control the spacing between the background edge and the progressbar.

Thanks @Kikobeats for the idea and @andreysaleba for contributing the original PR!