This is part of the CSS loader series that show different loaders that can be used in your application to show the user the app is processing and to please wait. CSS Loaders
In this tutorial we're going to build a CSS loader of a rolling square.
The HTML for this loader is very simple we just need one HTML element as the animation will be done by the CSS.
The css for this will need to start by creating a square easily done by using the
height properties with the
border property. Placing the
transform-origin to the right will allow us to rotate the box to the right. Then placing the animation of rotateRollingSquare and roundCornerRollingSquare on to the element will do all the hard work for you.
border: 2px solid #333;
margin: 2rem auto;
animation: rotateRollingSquare 1s infinite, roundCornerRollingSquare 1s infinite;
The rotateRollingSquare animation will rotate the square at 90deg, then we need to translate the square by half it's size to make sure it stays in the same position.
transform: rotate(90deg) translate(3rem, 3rem);
To add the curved corner we need to just apply the
border-bottom-right-radius property to half the size of the square, making this happen at 70% mark of the animation will curve the corner as it's being rotated.
That's all the HTML and CSS you need for this loader view the demo to see this in action.