Prototyping a circular loading indicator using Principle for mac
Almost every app has them, but no-one wants to see them. Yet these are a fundamental element in designing a product where content loading is a consideration. These little animations that progress while content is fetched serve as a reinforcement of our expectation that something is happening, and what we are looking for will eventually arrive.
I do almost all my prototyping in Principle. It works extremely well with Sketch, and is incredibly fast to work in. Ideas can be tested, iterated or thrown away quickly with makes this an invaluable tool for testing moving elements within modern app design.
While working on an app this week I wanted a circular spinner that would fill from 0–100% based on the data received. Principle is great for linking screens and animating differences, but on first look for this type of animation the tool can be limiting.
With some trickery, I’m going to share how you can create the effect of a circular progress indicator, which will result in something like the above.
Drawing the shape
Ok, let’s create our shapes. Principle has sufficient drawing tools to achieve the shape in the finished example above, so this time there’s no need for Sketch or Photoshop, however this technique will work fine with raster images also.
Firstly we’re going to create a rectangle, and then set a radius so that it appears as a circle. For the purpose of this demo I’m going to set the scale value to 2 to make everything legible, but I would usually design in Principle and Sketch and 1x for iOS apps. Set the rectangle to 24pt x 24 pt, with a transparent fill, and a 10% black stroke of 2 pts.
Creating the fill and setting up our first mask
Next, we’re going to copy that shape and change it’s colour to the fill we want for our progress indication. We’re also going to put the shape into a rectangle that will act as a mask. Make sure ‘Clip Sublayers’ is ticked on the rectangle mask, and set it to 24 pts high, 12 pst wide at 2x scale.
Once we have our mask, duplicate it and flip that 180°.
We’re going to simulate the effect of the circle filling by animating the height and width of both the left and right side masks. The construction and what is actually happening is illustrated below.
Animating the masks
Before we create multiple artboards in Principle to animate this effect, we need to change the width and height of each mask to 0. Because the left mask is a 180° duplicate of the right our starting points to grow the mask’s width and height is ideal.
Next, we’re going to create an additional artboard to animate the spinner to completion. Below is how the scene is set up. Firstly the circle, fill and masks have been placed into a containing group called Spinner –this will come in handy later.
I’ve adjusted the timing of the transitions so that the left side of the mask animates after the right has completed. Note that the X and Y transitions need to match the corresponding width and height transitions. I’ve set these to linear for a smoother transition, but other easings will work as long as both X, Y, Width and Height match.
And this is the result of those animations. It’s not that exciting right now, so there’s a couple of final tweaks that will give the load indicator a more natural and fluid feel.
Finishing touches
Let’s play with some rotation, scale and opacity to add to the movement. As this is 2x scale, on the first artboard we’re going to change the spinner group to 1x and the opacity to 0%. We’ll also make the angle of the spinner group -45°.
We’re going to leave the second artboard as it is with one exception, we’ll give the spinner group an angle of 135°.
Finally, duplicate the second artboard to create a third. This will be used for the exit animation. Let’s set the angle of the spinner group on the last artboard to 45° and match the scale and opacity of the first artboard (1x and 0%). Remember if you were creating this at 1x just devide by 2 and use .5 for the scale. This will create a nice effect as the spinner leaves the scene.
That has us most of the way there. I prefer to use a spring animation for most scaling effects, so let’s go ahead and do that. Also, let’s put in an auto transition from artboard 3 back to artboard 1 so it’s easy to click through it multiple times.
The final result
And this is our final result. This can easily be copied into more comprehensive prototypes and Principle will maintain the transitions and timing as it has been set here. There are many variations that could be done using this technique and manipulating the elements in different ways.
I find for smaller UI elements it can be helpful working isolation and bringing them into an app prototype once they have been adjusted to the desired behaviour.
Added the final source file for reference:
https://www.dropbox.com/s/dj5gf0i2k48bvbb/circular_loading_tutorial.prd?dl=0
Happy prototyping!
