Creating a Facebook Messenger-Like Typing Animation with CSS

In today’s digital age, real-time communication has become a necessity. Whether it’s through social media platforms, messaging apps, or chatbots, users expect an interactive experience that mimics human conversation. One of the essential UI elements in chat applications is the typing indicator, which lets users know when the other person is composing a message. This small but effective feature makes conversations feel more dynamic and engaging.

Facebook Messenger, WhatsApp, and other major chat apps use a subtle typing animation to signal that a response is coming. Recreating this effect with CSS and minimal JavaScript is not only simple but also a great exercise in modern web development.

Follow this video for complete guidance :

Understanding the Importance of Typing Indicators

Typing indicators improve the user experience in chat applications in several ways:

• Enhances engagement: Users are more likely to stay in a conversation when they see that the other person is actively responding.
• Reduces confusion: It eliminates uncertainty about whether the other user has seen the message and is responding.
• Creates a real-time experience: Simulating the effect of a real conversation makes online chatting more natural.

HTML

<div class="typing-indicator" id="typingIndicator">
    <div class="typing-dot"></div>
    <div class="typing-dot"></div>
    <div class="typing-dot"></div>
</div>

CSS

.typing-indicator{
    display: none;
    position: absolute;
    left:10px;
    bottom: 0;
}
.typing-dot{
    width:6px;
    height: 6px;
    background-color: #666;
    margin:0 2px;
    border-radius: 50%;
    animation: typing 2s infinite ease-in-out;
}
.typing-dot:nth-child(1){
    animation-delay: 0s;
}
.typing-dot:nth-child(2){
    animation-delay: .2s;
}
.typing-dot:nth-child(3){
    animation-delay: .4s;
}

@keyframes typing{
    0%,100%{
        opacity: 0.2;
        transform: translateY(0);
    }
    50%{
        opacity: 1;
        transform: translateY(-2px);
    }
}

JavaScript

typingIndicator.style.display = 'flex';
setTimeout(() => {
    typingIndicator.style.display = 'none';
}, 3000);

How Typing Animation Works

A typing indicator typically consists of three animated dots that appear sequentially to indicate that someone is typing. The dots should have a pulsing or bouncing effect, similar to those found in Facebook Messenger or WhatsApp. To achieve this, we rely primarily on CSS animations.

Breaking Down the CSS Animation

There are several ways to create a typing animation, but the simplest and most effective method involves using keyframe animations. The animation should make the dots appear and disappear in a rhythmic sequence, creating a dynamic effect.

Key elements of the typing animation:

1. Three dots: The dots should be circular and small, placed in a row.
2. Opacity transition: The dots should fade in and out to create the typing effect.
3. Vertical bounce effect: The dots should move slightly up and down to mimic natural typing behavior.

Implementing the Typing Animation

To achieve this effect, we define a .typing-indicator container that holds three div elements representing the dots. Each dot is styled with a width, height, border-radius, and background-color. Then, we apply an animation to each dot using the @keyframes rule.

The keyframe animation cycles through opacity and slight vertical movement, giving the illusion of the dots appearing and disappearing in succession. The delay in each dot’s animation creates the wave-like effect.

Enhancing the Typing Indicator with JavaScript

While the CSS animation takes care of the visual effects, JavaScript allows us to control when the typing indicator appears and disappears based on user interactions. In a chat application, the typing indicator should become visible when the bot or user is generating a response and disappear once the message is sent.

To do this, we can use event listeners on the input field. When the user starts typing, the typing indicator becomes visible. When the user sends a message, a small delay before hiding the indicator can mimic real human typing behavior.

Customizing the Animation

Depending on the chat application’s design, you may want to adjust the speed, color, and movement of the dots. Here are some customization ideas:

• Change the dot color: Use brand colors to make the typing indicator fit seamlessly into your chat UI.
• Adjust the animation timing: Slow down or speed up the animation based on the desired effect.
• Modify the dot spacing: Increase or decrease the gap between the dots for a different visual appearance.
• Use SVG or GIFs: For advanced designs, you might consider using SVG animations or pre-designed GIFs instead of CSS.

Implementing the Typing Indicator in a Real Chat Application

In a real-world scenario, you may be working with a backend server or chatbot API that determines when the bot is typing. In this case, the typing indicator can be triggered programmatically when the system is processing a response. WebSockets or AJAX calls can be used to enable real-time updates.

For example, when fetching a chatbot response, the typing indicator can be displayed until the response is received and then hidden immediately after the message is added to the chat window. This provides a realistic and interactive experience for the user.

Creating a typing animation similar to Facebook Messenger’s is a great way to enhance user experience in chat applications. With a simple combination of CSS animations and JavaScript event handling, you can build an intuitive and engaging chat UI. Whether you’re working on a chatbot, a customer support tool, or a personal messaging app, adding a typing indicator makes the conversation feel more real and dynamic.

By experimenting with different animation effects and integrating real-time updates, you can take your chat application to the next level, making it more engaging and user-friendly.