Skip to main content

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?

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/

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

Did it work for you?

Reply


Terms & ConditionsCookie settings