How to create circular loading animation using Principle for Mac

5 min readJan 5, 2017

For some time now I’ve been using Principle for almost every prototype I create. There are lots of prototyping tools in the market these days but Principle is a sure winner when it comes to speed compared with any other tools. Although interface looks very simple and covers only basic interactions with your mobile phone (tap, drag, scroll..) it is a very powerful tool. If you used tools like Adobe Flash or Adobe After Effects for your animations don’t expect the same because it’s not built for keyframe animations (you could do that with multiple artboards but trust me it is painful).

Loading or progress bars are easy to create, but when it comes to circular animations we need to use some tricks, this is an example of animation I’ve had some problems with but found an elegant solution. The trick is to divide a circle into halves and animate each segment individually.

Let’s draw a circle

For the sake of simplicity of this tutorial, I’ll draw shapes directly in Principle. Create a new rectangle with 202x202 dimensions (you can do that by pressing letter R on your keyboard). Snap rectangle to horizontal and vertical center on your artboard. Set radius to 100 and stroke to 20 pts (also change the stroke color to #D6D6D6 and rectangle fill to transparent.

Group and name your layers

Rename default Layer to “base”, duplicate it (CMD+D) and change the stroke color to #D9F336. Now select that new layer (in this case it’s called “base 2” ) and press CMD+G tree times to create tree groups. Time to change these group names so we can keep things nice and clean.

Let’s create some masks!

This is the most important preparation part of this animation. Select “circle_right” group and drag it from its left side to the middle (allow it to snap to the middle while dragging object you’ll see horizontal and vertical magenta lines). While still in the “circle_right” group, above the Artboard section you’ll see “Clip sublayers” option (make sure it is turned ON).

Now select group named “circle” and repeat the same process. Don’t forget to turn “Clip sublayers” on again.

We still have some work to do on the third group named “circle_spin”. Select that group and change the width and height of that rectangle to zero. Pay attention that the rectangle is still positioned in an absolute center of the circle. If you’re having trouble doing this just enter these parameters (x:0, y:101, width:0, height:0). Make sure that “Clip sublayers” is turned OFF.Awesome! Let’s move on!

This is where the magic happens

Select the layer named “circle_spin” and now we can play with the “Angle” parameter. While holding SHIFT press DOWN arrow on your keyboard until you get -180° value. Our goal is to animate the transition from -180° degrees to 0°. To do that we need to create another artboard.

Let’s animate — we’re halfway there!

Select “Artboard 1” and press CMD+D to duplicate it. While in “Artboard 2” select the “circle_spin” group and change angle value to 0° (angle value in “Artboard 1” needs to be -180°). Go back to “Artboard 1” and create “auto” connection with “Artboard 2”. Now that you created “Artboard 1 auto” connection, click on it and set transition to 1 second. Change parameter of animation from “default” to “linear”. At this moment you can see the animation of the right side of the circle playing in the preview window.

Adding left half of the circle

We need to repeat the same process of creating masks for the left half of the circle. Don’t worry, this time things are much simpler. On the “Artboard 1” select the “circle_right” group and duplicate it. Rename the duplicated group name to “circle_left” (you don’t need to rename other group names). While group layer “circle_spin 2” is selected, this time, drag the rectangle to the left side like shown in the animation below. Click on the “circle_spin 2” and set angle value to -360° degrees.

Final animation steps — the circle is now complete!

Select the group “circle_left” from “Artboard 1” and copy paste it to “Artboard 2”. Duplicate “Artboard 2” and in the “Artboard 3” go to “circle_left” group and click on “circle_spin 2” layer to change angle value to -180°. The final step is to “auto” connect “Artboard 2” to “Artboard 3” and set animation transition to 1s like in the step before.

We are doing this because we want angle values (-180° to -360°) to change from “Artboard 2” to “Artboard 3” so we can have nice full circle animation.