search

kevinsqi / react-circular-progressbar

A circular progressbar component, built with SVG and extensively customizable
http://www.kevinqi.com/react-circular-progressbar
MIT License
1.09k stars 132 forks source link

Is a Half Circle or Semir Circle possible ? To save some screen space. #206

Closed Krammig closed 2 years ago

Krammig commented 2 years ago

Just wondering if to is possible have a Horizontal semi circle / half circle please ?

I am wanting to show a Countdown in Seconds preferably decrementing however the standard incrementing will do.

Example 30 seconds that will animate in 30 chunks and the text counter accordingly as an integer.

The main thing is just a semi-circle to same the screen space.

Thanks

Nikola-Milovic commented 2 years ago

@Krammig you can check out https://codesandbox.io/s/vymm4oln6y?file=/index.js

There you will find circleRatio={0.75} property, you can set it to 0.5 and I think that would work as intended

Edit: since you want it horizontal

      styles={buildStyles({
              rotation: 1 / 2 + 1 / 8,

you have to rotate it, (play with the values to get it horizontal)

kevinsqi commented 2 years ago

Thanks for the suggestion @Nikola-Milovic! That's how I'd approach it. See this thread for more info: https://github.com/kevinsqi/react-circular-progressbar/issues/49