Accurate and editable radial progress bars in Sketch

[Download the corresponding Sketch project file here.]

Drawing a radial progress bar in Sketch may not be difficult, but creating one that’s easily editable and mathematically accurate is a different story.

Fortunately we’ve got some tricks, and some math, that’ll make your life a whole lot easier.

For those who prefer reading to watching, get the step by step below the video.

1. Create a circle

To see the finished product and poke around with it, download the Sketch project file here.

We’ll start by creating a simple circle by grabbing the oval tool, holding shift on the keyboard, and dragging one out. To make things a little easier down the road, let’s also set the size to a nice round number like 400×400.

A little further down on the Inspector, we’ll also turn off the fill and turn on the border. While we’re here, go ahead and fatten up that border a bit and give it a color you like. I’m gonna go minty fresh with it.

Related: Save hours with these 86 Sketch shortcuts

2. The dashed border trick

Here’s where things get interesting. We’re gonna take control over the length of this ring by turning it into a dashed line—with one big, fat dash.

Click the gear and type “9999” into the first box labeled “Gap.” This is going to ensure that we don’t end up with 2 “dashes” coming together, which would make our ring the wrong length.

Want to freehand things? Click in the first “Dash” box, hold the shift key, and then start pressing or holding the up arrow on the keyboard to add length. You’ll see the ring coming around and can dial it up to where you want it.

If you’d like round end caps at this point, you’ll want to click the round “Ends” icon, but also change the border position from “Inside” to “Centered.”

4. Getting mathematically accurate

Chances are, you’re creating these rings to visualize data—like a percentage. In that case, it’s pretty important for the ring to be an accurate representation of that data.

Here comes a little math. Don’t worry—Sketch happens to double as a calculator.

In order to convert a percentage into a perfectly accurate ring, head back to the “Dash” field and type your numerical percentage as a decimal value (i.e. “.75” for 75%), then an asterisk ( * ) to multiply by the height/width of your circle (i.e. “400”), then *3.14 to multiply by pi. It might sound intense, but you’ll find the formula written out below for easy reference.

Hit return, and you’ve got your perfectly accurate ring.

Formula for dash:
. Percentage * Circle Height * 3.14

Example:
.75*400*3.14

5. Rotating and scaling

At this point, you can flip and rotate your ring however you’d like. But if you drag to scale your circle, the math will no longer be correct and you’ll have to redo it.

If you instead choose Scale from the toolbar and enter a new size, Sketch will automatically refactor the math on all applied effects.

Now all you have to worry about is the border width.

Looking for more Sketch tutorials?

How to override colors in Sketch

Creating infinitely scalable connection arrows in Sketch

What are you designing with Sketch? Tell us on Twitter: @InVisionApp.