UI Sugar: Spirals
The Reasoning Behind The Binge
So I was browsing Reddit the other day, when I stumbled across this little piece of magic:
It mesmerised me. I was determined to figure out precisely how it worked. I wanted to replicate the effect on iOS.
When this mood strikes, usually while browsing on Dribbble et al, I am like a Dog with a bone. I will not rest until I achieve my goal.
Ignorantly, I initially set about using Keyframes and working out fractional duration based on the position of the ring. This was wrong. I was missing a crucial piece of the puzzle, and, instead of detailing it myself I will let Reddit user BestPseudonym explain for me:
Every second, the triangle's dot returns to its original position. Every second the square dot completes 13/14ths of its cycle. The pentagon dot completes 12/14ths of its cycle. 12/14 is the same thing as 6/7. So every 7 and 14 seconds, the triangle and pentagon dot will be in the original position.
It blew my mind. It was ridiculously simple. The durations were fractions. The innermost shape had a duration of 1, so the next shape out had to have 1.5. This figure would change depending on how many rings you wished to add. Think of 2 sine waves, one moving half as fast as the other, that's the theory.
I decided to make it a progress spinner. Because, speaking only for me, I could sit there and let an app load for hours while watching this happen. The only caveat was, drawing such shapes proved difficult, and the effect wasn't quite as neat as the attached GIF.
Stop, Spinner Time
When I decided to make it a spinner, I figured that it ought to be circle. I was determined to make it work as close as possible to the source, and so I set about using a different approach - Math.
Trigonometry proved to be my best friend, for the first time in more than 7 years. I figured that if I used cosine to work out the x position, based on the radius, current time offset and centre point of the container, I could use sine to calculate the appropriate y position. The result being the header GIF you see above.
I also figured that, if I felt like using a linear, horizontal indeterminate indicator in my app, I could use this same component and only remove the Y position calculation.
Recipe
If you liked this post, and like what I have to write about, give me a follow on Twitter. I also appreciate a Recommend ⭐️
