Add background <circle> element, to allow inverted colors about react-circular-progressbar

[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!