Jumping dots for chat conversation

June 13, 2022

I’m currently building a web-based chatbot. As part of the chatbot I have implemented jumping dots indicating typing as follows:

CSS file

    .jumping-dots span {
      position: relative;
        margin-left: auto;
        margin-right: auto;
      animation: jump 1s infinite;
    }
    .jumping-dots .dot-1{
      background-color: #ED49FE;
            width:12px;
            height:12px;
            border-radius:50%;
            margin-right:3px;
            
      animation-delay: 200ms;
    }
    .jumping-dots .dot-2{
      background-color: #ED49FE;
            width:12px;
            height:12px;
            border-radius:50%;
            margin-right:3px;
      animation-delay: 400ms;
    }
    .jumping-dots .dot-3{
        background-color: #ED49FE;
                width:12px;
            height:12px;
            border-radius:50%;
            margin-right:3px;
      animation-delay: 600ms;
    }
    
    @keyframes jump {
      0%   {bottom: 0px;}
      20%  {bottom: 5px;}
      40%  {bottom: 0px;}
    }

HTML file

<div class="my message">
<span class="jumping-dots">
  <span class="dot-1">.</span>
  <span class="dot-2">.</span>
  <span class="dot-3">.</span>
</span>
</div>

My problem is that the dots are somehow not displayed properly as you can see in the following image (they are not round and a black dot is inside the dots):

Where is my mistake?

Second, I would like to remove the dots programmatically using the following code:

var insertedContent = document.querySelector(".jumping-dots");
if(insertedContent) {
    insertedContent.parentNode.removeChild(insertedContent);
}

Unfortunately, this does not remove everything (still a small part of the dots remains). Why?

>Solution :

The reason why the dots are not round is because a span HTML element is set to have an inline display by default. This means that the element will only take up as much room as necessary to display the text. You cannot set a width and height to inline-displayed elements.

Try setting the .jumpingdots span class to an inline-block display. This will also allow you to remove the periods from inside the element without making it disappear. The new code for your .jumpingdots class should be as follows:

.jumping-dots span {
  position: relative;
    margin-left: auto;
    margin-right: auto;
  animation: jump 1s infinite;
display:inline-block;
}

And the html should be as follows:

<div class="my message">
<span class="jumping-dots">
  <span class="dot-1"></span>
  <span class="dot-2"></span>
  <span class="dot-3"></span>
</span>
</div>