Shape Shift Loader
There are numerous types of loading animations out there. From complex animations to simple rotating circles, they have become a part of the entire UI design process.
If simple is enough, head over here to find one with CSS. If not, continue.
How this works?
I’m drawing a square initially. The width of the square is then extended to become a rectangle.
By using the border-radius property, and setting it to 50%, the shape then turns to be a circle. After which, transform is used to rotate the element.
Running the entire process in under 3s makes it a beautiful animation to be used on page load.
animation: shifter 3s infinite;
Here is the frames for the animation.
Color credits: Flat UI Colors