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.
See the Pen Twinner Spinner by Katy DeCorah (@katydecorah) on CodePen.
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.