Paulund

CSS Square Roller

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

The HTML for this loader is very simple we just need one HTML element as the animation will be done by the CSS.


<div id="square-roller"></div>

The CSS

The css for this will need to start by creating a square easily done by using the width and 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.


#square-roller
{
    width: 6rem;
    height: 6rem;
    border: 2px solid #333;
    margin: 2rem auto;
    transform-origin: right;
    border-radius: 5px;

    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.


@keyframes rotateRollingSquare
{
    100%
    {
        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.


@keyframes roundCornerRollingSquare
{
    70%
    {
        border-bottom-right-radius: 3rem;
    }
}

That's all the HTML and CSS you need for this loader view the demo to see this in action.