Loading…
There is an art of guessing that I am attempting to master. When it comes to coding layouts, animations, and/or visual effects there are so many combinations of possibilities; the possibilities are neither right nor wrong, and the choices we make as developers are exactly that: choices. This past week I struggled to make a loading animation, and learned so much through my struggle. I wanted to make a circle that looks and behaves like the notorious ‘syncing’ symbol.
I began programmatically laying out a circle using emojis. I struggled to find the right positions so that my circle would be centered, clean, and even. I decided my best bet would be to imagine it like a clock.
After hours of failing and much frustration, I ended up with something that looks like this.
My first attempt to get the emojis to behave like the syncing circle was anything but perfect.
I knew that I was doing some things right, I just needed to figure out what to fix. I began to manipulate the delays between pulses and separated each label into its own animation. Doing this left me closer to my vision, with a syncing circle that looks like this.
This animation, however, is not very easy to look at. By continuing to strategically (and randomly) manipulate the animation duration, delay, and groupings, I began to get closer and closer to my ideal loading circle.
Finally I ended with a syncing circle that was my own. It does not act like the loading circle I began this post with, but it is a loading circle that I prefer.
