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


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).

screenshot of my Sketch file (green circle)

To something like this: screenshot of an example

5/26/2015 6:29:00 AM

Accepted Answer

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 !

5/25/2016 4:24:00 PM