Progress bar / animation to simulate "thinking" after form submission

  • 18 May 2021
  • 5 replies
  • 119 views

We’d like to add a progress bar to simulate “thinking” after form submission, prior to triggering a thank you page. Anyone have a working example?


5 replies

Userlevel 6
Badge +1

Are you just “faking it”? As in not actually loading anything? If so you can use a simple js progress bar like this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3

You can even do it in CSS http://jsfiddle.net/cherryflavourpez/Bq3Fm/

Thanks @digibomb … You’re correct, just for appearance. In this case, when a potential customer searches for specific contractor types in or near their zip, we currently match the contractor type and location instantly, but I’m looking for something to create anticipation. Something similar to the form here: https://www.instantcheckmate.com/

Userlevel 6
Badge +1

Ok, so this works. Just replace “I am here!” with your form code.

<html>

<head>
    <script>
        let intervalId; // preserve intervalID so we can cancel it later
        let startTime; // preserve progressbar start time
        let continueFor = 5000; // X sec
        let interval = 10; // progressbar updte interval

        let wait =
            ms => new Promise(
                r => setTimeout(r, ms)
            );

        let repeat =
            (ms, func) => new Promise(
                r => (
                    intervalId = setInterval(func, ms),
                    wait(ms).then(r)
                )
            );

        window.onload = function() {
            let div = document.getElementById("div");
            let elem = document.getElementById("progress");
            let startTime = new Date().valueOf();

            div.hidden = true;

            // this function stop the repeats, when X sec is passed.
            let stop =
                () => new Promise(
                    r => r(setTimeout(() => {
                        clearInterval(intervalId);
                        elem.hidden = true;
                        div.hidden = false;
                    }, continueFor))
                );

            // this function repeats to calculate progress bar value, at every interval.
            repeat(intervalId, function() {
                let elapse = new Date().valueOf() - startTime;
                elem.value = elem.max * elapse / continueFor;
                console.log(elem.value);
            }).then(stop());
        };
    </script>
</head>

<body>
    <div id="div"> I am here! </div>
    <progress id="progress" max="100" value="0"></progress>
</body>

</html>

Thank you sir! @digibomb

Userlevel 6
Badge +1

Did it work for you?

Reply