Creating A Custom Throbber Using Color Gradients And Bézier Curves

A throbber, or activity indicator, is a great way of letting your users know that the app is performing some background task needed to show the next screen of content. Today, we take a look at how we can move away from the system defined indicators and design our own!

An example XCode project is available on this link.

What Do We Need?

The first thing when designing anything is figuring out what we actually want. I for one, am a huge fan of colors. I want to move away from the boring, gray system indicators and design a new throbber using a color gradient. I also like smooth and symmetric surfaces, so I’m going to go with a circle shaped indicator, but with a hole inside of it. I imagine the final throbber looking something like this:

A mockup of the throbber we’re going to design.

Let’s specify what we’re going to need to construct this.

1. A color gradient (duh…). For this example, I want the colors to shift as we traverse the circumference of the circle, meaning that the color at point (r*cos(a), r*sin(a)) should be different from the color at point (r*cos(-a), r*sin(-a)). This goes for all cases where a is not a multiple of π. This lends itself nicely to using a conic color gradient, instead of a radial or axial one.
2. A mask that covers up…