Google doc form in iframe is now loading after few seconds but how to show the timer countdown?-CodePudding

Hey I have done the code to show the iframe google doc form in my website but as there is no any countdown shown or text that will elaborate that how many seconds are left there. Here's the code:

<script>
    // function to set the source (src) of the iframe...
    function myframe(){
        var frame = document.getElementById("iframe").src = "google form link";
     }
     // call the function 3 seconds (3000 milliseconds) after page load...
     setTimeout(myframe, 10000);
</script>

<iframe id="iframe" src="" height="2350px" width="100%"></iframe>

Somebody help me out and add the line which can elaborate that Please Wait... Sec Left!

I did try to show a google form in my website but there is no text or css designed to elaborate that how much time will take as there should be text that says 10 seconds left and the 9 8 7 6 5 4 3 2 1 and then showed the iframe google form.

CodePudding user response：

Like this?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <span id="countdown"
      >Please, wait. <label id="seconds"></label>s left.</span
    >

    <iframe
      id="iframe"
      src=""
      style="display: none"
      height="2350px"
      width="100%"
    ></iframe>

    <script>
      let secondsToWait = 10;
      document.getElementById("iframe").src =
        "https://jsonplaceholder.typicode.com/";

      const intervalId = setInterval(() => {
        document.getElementById("seconds").innerHTML = secondsToWait--;

        if (secondsToWait == 0) {
          clearInterval(intervalId);
          document.getElementById("iframe").style.display = "block";
          document.getElementById("countdown").style.display = "none";
        }
      }, 1000);
    </script>
  </body>
</html>