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 border-radius
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
.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: