50projectsIn50days – Day 23: Kinectic Loader

The HTML page doesn’t have any html nor Javascirpt which explains the functionalyti. Therefore all the changes is made by the CSS.

The movement is made by the Transform function as you can see here:

@keyframes rotateA{    0%, 25%{        transform: rotate(0deg);    }    50%, 75% {        transform: rotate(180deg);    }    100% {        transform: rotate(360deg);    }}@keyframes rotateB{    0%, 25%{        transform: rotate(90deg);    }    50%, 75% {        transform: rotate(270deg);    }    100% {        transform: rotate(450deg);    }

The transform property is:

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Transform

You can see the code in this GitHub Repository: 23.kinetic_loader and the demo of the project is here: Kinectic Loader