This tutorial will teach you how to use clipping masks to create a loading spinner.

More specifically, we’ll create two blue half circles using clipping masks, which will be set on top of a gray empty state circle. We’ll play with the width and height variables of the two circle halves to simulate the spinner filling to completion. We’ll also add an introduction and exit animation for the spinner, as well as some rotation throughout to add some flare.

Inspiration for this tutorial came from Jonny Bolton’s excellent Medium article about creating a circular loading indicator, and I recommend referring to it for any extra information.

No assets are needed for this tutorial since we can create them all directly in Principle.

Download the Principle file.

___

Download the subtitles for this tutorial (.srt file).