CSS Typing Indicator

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 create a typing indicator out of CSS. You'll commonly see a typing indicator on messaging apps such as iMessenger, Facebook messenger and WhatsApp to show that the other person in the conversation is typing a message so you can wait for it to be sent.

The HTML

To create the above image for the typing indicator we will need to use the following HTML.

<div class="typing-indicator">
    <span></span>
    <span></span>
    <span></span>
</div>

This has a wrapper div with 3 spans inside, the wrapper div is going to be used to create the speech bubble effect and the spans are used to create the flashing circles inside the speech bubbles.

The CSS

The typing indicator has a speech bubble wrapped around it, so we're going to start off by created this speech bubble, the main part of this will simply set a width and then border-radius to create an oval effect. To add a slight movement to the indicator we're going to add a pulse effect to the speech bubble, this pulse will allow us to grow the speech bubble on an infinite loop.

.typing-indicator {
    background-color: #F5F5F5;
    width: 60px;
    border-radius: 30%;
    padding: 1rem 1.5rem 2rem;
    margin: 0 auto;
    position: relative;
    animation: 2s pulse infinite ease-out;
}

Using the pseudo selectors we can create 2 new elements which will act like the dots at the bottom left of the speech bubble. These are simply circles with the same background colour as the speech bubble. Then we change the position of the circles by using absolute position and changing the bottom and left properties.

.typing-indicator::before,
.typing-indicator::after {
     content: '';
     position: absolute;
     bottom: -11px;
     left: -11px;
     height: 20px;
     width: 20px;
     border-radius: 50%;
     background-color: #F5F5F5;
 }
.typing-indicator::after {
     height: 10px;
     width: 10px;
     left: -17px;
     bottom: -17px;
 }

With the speech bubble created we can style the span inside to create flashing circles. We make a circle by setting the dimensions then applying a border-radius: 50%;. To create the blinking effect we simply change the opacity of the circles starting at 0.4, then using the animation we change the opacity to 1.

.typing-indicator span {
    height: 15px;
    width: 15px;
    float: left;
    margin: 0 1px;
    background-color: #9E9EA1;
    display: block;
    border-radius: 50%;
    opacity: 0.4;
}

Using the nth-child we can select a certain span element then apply the blink animation to run a different delay times so they're not starting at the same time.

.typing-indicator span:nth-child(1)
{
    animation: 1s blink infinite .3333s;
}

.typing-indicator span:nth-child(2)
{
    animation: 1s blink infinite .6666s;
}

.typing-indicator span:nth-child(3)
{
    animation: 1s blink infinite .9999s;
}

The blink animation will simply change the opacity to 1 at the 50% mark, this means the element will start at 0.4, half way through the animation it will return to 1, then back to 0.4.

@keyframes blink
{
    50%
    {
        opacity: 1;
    }
}

The pulse effect will using the transform property to change the scale of the element by x 1.05 which will slightly grow the element.

@keyframes pulse
{
    50% {
        transform: scale(1.05);
    }
}

View the demo to see how HTML and CSS works.