Pure CSS Loading Animation

Showcasing my skills in Web Development where I am constantly pushing the boundaries, here is my CSS Loading Animation. The experiment here uses CSS keyframes to achieve 60 frames per second animation without repainting the elements.

To build the animated object (the spinner) I use a pair of incomplete CSS Triangle tricks. When you combine the CSS Triangle trick with border-radius you find you can curve one edge of the triangle. However, I probably reinvented this method, but I haven’t seen any prior art. The nice Home button on this site’s menu bar shows how I use a single rounded triangle.

As I saw that the single rounded triangle worked quite well. So, I started experimenting, leading me to the complete circle design you see in the spinner.

The effect is created by hacking the CSS Triangle trick to display two opposing triangles instead of one directional arrow. This is created with two non-transparent borders instead of one, which would create a single arrow:

1
2
3
4
5
6

.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 50% border radius on the element. This forces a circular appearance with two slices and two gaps. Finally, we create a sibling using the :after CSS selector providing the remaining two slices in the gaps from the first element:

1
2
3
4
5
6

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

The first example shows an effect similar to Apple’s “Beach Ball”. Both elements animate together. Because the same look can be achieved without two separate elements, the second demo shows a use for keeping them separate: