how to make letters appear like you are typing?-CodePudding

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 >

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

<div >
  <div id="myBar"  style="width:0%">0%</div>
</div>
<br>
<button  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.

CodePudding user response：

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);

Processing<span id="dots"></span>