.typing-indicator {
    background-color: #F5F5F5;
    width: 60px;
    border-radius: 30%;
    padding: 1rem 1.5rem 2rem;
    margin: 0 auto;
    position: relative;
    display: inline;
}

.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;
 }

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

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

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

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

@keyframes typing-indicator-blink
{
    50%
    {
        opacity: 1;
    }
}

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