Simple shadow handle with progress bar

<html>
  <head>
    <title>TEST</title>
  </head>
  <body>
    <progress value="0" max="100" id="pb"></progress>
    <div id="main"></div>
    <div id="shadow" style="display: none"></div>
    <script>
      function sleep(ms) {
        return new Promise((resolve) => setTimeout(resolve, ms));
      }
      let main = document.getElementById("main");
      let shadow = document.getElementById("shadow");
      let pb = document.getElementById("pb");
      async function handle() {
        shadow.innerHTML = "";
        for (let i = 1; i < 11; i++) {
          pb.setAttribute("value", i * 10);
          shadow.appendChild(newElement());
          await sleep(1000);
        }
        main.innerHTML = shadow.innerHTML;
        setTimeout(handle, 5000);
      }
      function newElement() {
        let el = document.createElement("div");
        el.innerText = "" + Math.random();
        return el;
      }
      handle();
    </script>
  </body>
</html>