Pure CSS Loading Animation

2017-08-18

This is an example I wrote, as a showcase of skills in Web Development where I am constantly pushing the boundaries. The experiment here uses CSS keyframes to achieve 60 frames per second animation, while the object being animated (the spinner) is built using a pair of incomplete CSS Triangle tricks, combined with border-radius to convert the triangle into a circle.

I invented the rounding of the triangle via border-radius (maybe I reinvented it, if there is prior art, but I haven’t seen any) to make the nice Home button on this site’s menu bar. Once I’d seen how that worked out, I started playing with it and came upon the complete circle design you see in the spinner.

The effect is achieved by hacking the CSS Triangle trick to display two opposing triangles instead of one directional arrow. This is done by using two non-transparent borders instead of one, as would be the case for a single arrow:

.selector {
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #eee;
    border-bottom: 25px solid #eee;
}

Once we have the opposing triangles we apply a border radius of 50% on the element to force a circular appearance with two slices and two gaps. Finally we create a sibling using the :after css selector which provides the remaining two slices in the gaps from the first element:

.selector:after {
    border-left: 25px solid #ccc;
    border-right: 25px solid #ccc;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
}

The animation we apply either animates both elements together to provide an effect similar to Apple’s “Beach Ball”, or we can animate each element individually as shown in my second example below. This first example shows the Beach Ball like effect (click the image for the live demo). While the same look could have been achieved without two separate elements, the second demo shows why I separated them to allow independent animation:

Loading aninmation

Here we see the fruition of using separate elements to get a slightly different spinner animation effect where each pair of triangles, or one element, is animated separately from the other. The effect is somewhat pleasing (click the image for the live demo):

Loading animation mid-progress