Tag: css

Highlighting 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 sixty 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 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:

.selector {
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #eee;
    border-bottom: 25px solid #eee;
}
Code language: CSS (css)

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:

.selector:after {
    border-left: 25px solid #ccc;
    border-right: 25px solid #ccc;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
}
Code language: CSS (css)

The first example shows an effect like 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:

So, we use two separate elements to create this slightly different effect. Here, we animate each pair of opposite triangles separately. The effect is pleasing: