A few days ago, I wanted to create a single element spinner. (Just for funsies.) After several minutes of tinkering, I whipped up Twinner Spinner.
Meet the elements
The main element,
.loader, acts as a container for the spinner. The real magic happens in its pseudo elements. I did this because once you animate a main element it can be tricky to control its pseudo elements. I also used the main element to dictate the size of the project since I’m using ems.
I styled the
:after similarly; each element is an 1em circle with a transparent border. But, one element received
border-left-color values, while the other received
My use of the border properties may seem redundant, but the elements need a border all around to keep the border from pinching in.
Once I got the elements styled and in place, I created an animation to rotate the elements. I found that by adding an
animation-delay to one of the elements, I could give the spinner a little more personality, especially paired with an ease
Even though I had everything looking pretty darn sweet, I put variables in where I could. By doing so, I can now control the speed, size, and colors of the spinner from the top of my Sass.
Naturally, I created a few spin-off spinners.
I absolutely love a scalable project with smart variables. It really helps push the boundaries on the simplest of properties.
p.s. the color palette I used for all spinners is from Flat UI Colors.
Did you enjoy this post? Support Soul Fire Farm. Soul Fire Farm is committed to ending racism and injustice in the food system.