add direction and starting point props

[jopek]

Hello,

is it possible to add a counterClockWise boolean prop and a prop for starting point.
I would love the circle go around like so: right (0%), up (25%), left (50%), bottom (75%), right (100%).

Perhaps, this is controllable from css ?

[kevinsqi]

Hey Jopek! Thanks for the suggestion.

Just released v0.6.0 that adds a counterClockwise prop, so you can do:

<CircularProgressbar percentage={40} counterClockwise />

The starting point change (i.e. rotation) can be done with CSS! Check out the "rotated" example in this codesandbox: https://codesandbox.io/s/vymm4oln6y

All you need is this CSS:

.CircularProgressbar-path {
  transform: rotate(90deg);
  transform-origin: center center;
}

Hopefully this addresses your needs!

[jopek]

Brilliant! This is exactly what I meant and need. Thank you very much for this!

💓