how to make letters appear like you are typing?

byMR

March 19, 2022

I have no idea.

what I am trying to do is:

{one second later}: h

{two second later}: hi

like you are typing.

what I want is:

<!DOCTYPE html>
<html>
<title>BruhBrug - </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">

<h2>Procressing...</h2>
<p>Centered label:</p>

<div class="w3-light-grey">
  <div id="myBar" class="w3-container w3-green w3-center" style="width:0%">0%</div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button> 

</div>

<script>
function move() {
  var elem = document.getElementById("myBar");   
  var width = 20;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>

and the

Processing…

is the part where I want the meter to appear like I am typing.

like:

{1 second later}: Processing.

{another 1 second later}: Processing..

{another 1 second later}: Prosessing…

and more.

>Solution :

Here’s the pseudo code and a high level abstraction of what we want to achieve (based on the initial question):

Set a counter that keeps track of the current character index being displayed (currentChar)
Set a variable that will hold the current string being displayed (display)
Set an interval that will add the next character to be displayed to the display variable
Check if we have reached the end of the string to be displayed

function type( str ){

  let currentChar = 0;
  let display = "";

  const interval = setInterval(()=>{
      if ( currentChar === ( str.length - 1 )  ){
        clearInterval( interval );
      }
      display += str[currentChar]
      currentChar++;
      document.body.innerHTML = display;
      console.log( display );
    }, 350 );
}

type("Hello world");

Keep in mind that it’s always a good idea to try things out yourself before resorting to external libraries. Also, you need to know that there are probably other implementations that you can try. Be creative and try things out!

Update: Here’s an implementation with a rotating interval that resets back to no dots and starts again:

const dotsChars = "...";
const dotsEl = document.getElementById("dots");
let counter = 0;
setInterval(()=>{
  if ( counter > dotsChars.length ){
    counter = 0;
  }
  dotsEl.innerText = dotsChars.slice(0,counter++);  
}, 350);