Cut circle into equal parts in Sketch to implement animation progress bar?

Question

I have a circle in Sketch 3 that I would like to animate a progress bar in iOS. So I will need to cut the green circle in 30 pieces so I can spin through [email protected] to [email protected] to give the animation effect (*-01 is 3% of the circle and *-30 is 99% of the circle).

Is there a way to do this automatically? I couldn't figure it out so I was going to do it manually, but became too difficult and time consuming to measure all the pieces exactly. Is there a technique to accomplish this?

Below is a screenshot of my Sketch file (green circle), and a screenshot of an example of how I would like to cut it up (blue circle from another sample project but don't know how they did that).

To something like this:

Answer 1

You can use GB-Sketch-Segmentcircle plugin to achieve this.

• Download and install the plugin (see link above) ;
• In the plugin menu : Segmented circles > Create segmented circle

• Choose options :

• Circle is segmented so you just have to copy / modify the circle segments to match the desired result.

Hope it helps !