Skip to main content
se eliminaron 31 caracteres en el cuerpo; título editado
Origen Enlace
information
  • 6.5k
  • 3
  • 25
  • 43

Movimiento de tres puntitos de escritura de Redes sociales

Quiero hacer el movimiento de mover los tres puntitos cuando alguien esta escribiendoconsecutivamente

introducir la descripción de la imagen aquí

pero no se mueven verticalmente, logre moverlos horizontalmente

encontre lo que quiero pero con css https://codepen.io/mattonit/pen/vLoddq

se puede con javascript?

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);
.dot {
  display: inline-block;
  margin: -1px;
}
<div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
</div>

Movimiento de tres puntitos de escritura de Redes sociales

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

introducir la descripción de la imagen aquí

pero no se mueven verticalmente, logre moverlos horizontalmente

encontre lo que quiero pero con css https://codepen.io/mattonit/pen/vLoddq

se puede con javascript?

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);
.dot {
  display: inline-block;
  margin: -1px;
}
<div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
</div>

Movimiento de tres puntitos

Quiero mover los tres puntitos consecutivamente

introducir la descripción de la imagen aquí

pero no se mueven verticalmente, logre moverlos horizontalmente

encontre lo que quiero pero con css https://codepen.io/mattonit/pen/vLoddq

se puede con javascript?

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);
.dot {
  display: inline-block;
  margin: -1px;
}
<div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
</div>

se añadieron 117 caracteres en el cuerpo
Origen Enlace
information
  • 6.5k
  • 3
  • 25
  • 43

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

introducir la descripción de la imagen aquí

pero no se mueven verticalmente, logre moverlos horizontalmente

encontre lo que quiero pero con css https://codepen.io/mattonit/pen/vLoddq

se puede con javascript?

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);
.dot {
  display: inline-block;
  margin: -1px;
}
<div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
</div>

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

introducir la descripción de la imagen aquí

pero no se mueven verticalmente, logre moverlos horizontalmente

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);
.dot {
  display: inline-block;
  margin: -1px;
}
<div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
</div>

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

introducir la descripción de la imagen aquí

pero no se mueven verticalmente, logre moverlos horizontalmente

encontre lo que quiero pero con css https://codepen.io/mattonit/pen/vLoddq

se puede con javascript?

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);
.dot {
  display: inline-block;
  margin: -1px;
}
<div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
</div>

cuerpo editado
Origen Enlace
information
  • 6.5k
  • 3
  • 25
  • 43

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

introducir la descripción de la imagen aquí

pero no se mueven verticalmente, logre moverlos horizontalmente

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);
.dot {
  display: inline-block;
  margin: -1px;
}
<div>
  <div class="dot">*<class="dot">⚫</div>
  <div class="dot">*<class="dot">⚫</div>
  <div class="dot">*<class="dot">⚫</div>
</div>

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

introducir la descripción de la imagen aquí

pero no se mueven verticalmente, logre moverlos horizontalmente

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);
.dot {
  display: inline-block;
  margin: -1px;
}
<div>
  <div class="dot">*</div>
  <div class="dot">*</div>
  <div class="dot">*</div>
</div>

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

introducir la descripción de la imagen aquí

pero no se mueven verticalmente, logre moverlos horizontalmente

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);
.dot {
  display: inline-block;
  margin: -1px;
}
<div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
</div>

se añadieron 102 caracteres en el cuerpo
Origen Enlace
information
  • 6.5k
  • 3
  • 25
  • 43
Loading
Origen Enlace
information
  • 6.5k
  • 3
  • 25
  • 43
Loading