Border spinners

code | June 5, 2014

See the Pen Twinner Spinner by Katy DeCorah (@katydecorah) on CodePen.

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.

Pseudo what

I styled the :before and :after similarly; each element is an 1em circle with a transparent border. But, one element received left and border-left-color values, while the other received right and border-right-color values.

My use of the border properties may seem redundant, but the elements need a border all around to keep the border from pinching in.

Animation

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 animation-timing-function.

Variable-ing Up

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.

See the Pen Twinner Spinner II by Katy DeCorah (@katydecorah) on CodePen.

See the Pen Slicer Spinner by Katy DeCorah (@katydecorah) on CodePen.

See the Pen Twisty Spin by Katy DeCorah (@katydecorah) on CodePen.

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.