Quiero hacer el movimiento de los tres puntitos cuando alguien esta escribiendo

[![introducir la descripción de la imagen aquí][1]][1]

pero no se mueven verticalmente, logre moverlos horizontalmente

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    let rootElements = document.querySelectorAll("div.dot");
    let i = 0;

    setInterval(() => {
      i++;
      if (i % 10 > 2) {
        i = 0;
      }
      rootElements[i % 10].style.margin = "0px";
      for (let j = 0; j < rootElements.length; j++) {
        if (j !== i) {
          rootElements[j].style.margin = "-1px";
        }
      }
    }, 500);

<!-- language: lang-css -->

    .dot {
      display: inline-block;
      margin: -1px;
    }

<!-- language: lang-html -->

    <div>
      <div class="dot">⚫</div>
      <div class="dot">⚫</div>
      <div class="dot">⚫</div>
    </div>

<!-- end snippet -->


  [1]: https://i.sstatic.net/cn6pp.jpg