CSS Typing Loader

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.

In this tutorial we're going to create a typing loader similar to a previous typing indicator loader tutorial, the difference with this loader is all the animation will happen on the typing dots, like the image above.

The HTML

The HTML is very simple it's just one element, the animation has 3 dots and these are going to be made by using the box-shadow property.

<div id="typing-loader"></div>

The CSS

To start the styling of this animation we need to style the first dot in the line. This is done by creating a circle using the width, height an border-radius property. Moving the dot left: -3rem will give us room to add the other elements. Adding the typing animation will do effects for us.

#typing-loader{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    animation: typing 1s linear infinite alternate;
    position: relative;
    left: -3rem;
    margin: 0 auto;
}

The typing animation will change the styling at the start of the animation, 25% in and 75% in the animation points. This allows us to use the box-shadow property to add multiple shadows that behave like another dot, then all we have to do is change the opacity of the background colour and position to create the typing effect.

@keyframes typing{
    0%{
        background-color: rgba(0,0,0, 1);
        box-shadow: 3.2rem 0 0 0 rgba(0,0,0,0.2),
        6.4rem 0 0 0 rgba(0,0,0,0.2);
    }
    25%{
        background-color: rgba(0,0,0, 0.4);
        box-shadow: 3.2rem 0 0 0 rgba(0,0,0,2),
        6.4rem 0 0 0 rgba(0,0,0,0.2);
    }
    75%{ background-color: rgba(0,0,0, 0.4);
        box-shadow: 3.2rem 0 0 0 rgba(0,0,0,0.2),
        6.4rem 0 0 0 rgba(0,0,0,1);
    }
}

View the demo to see this animation in action.