Add delay after clicking "Next" button in Multi Page Form

Get Help
1

Big picture I’m trying to add a lottie animation upon clicking the “Next” button. This animation will run 1 loop and then after it’s done continue to the next page as normal.

So far I can get it to run on button click but the page directs to the next page before the animation is complete, ignoring my timeout.

Here is my code for the timeout on the next button located in a custom plugin:

add_filter( 'gform_next_button_1', 'add_anim_onclick', 10, 2 );
function add_onclick( $button, $form ) {
    $dom = new DOMDocument();
    $dom->loadHTML( $button );
    $input = $dom->getElementsByTagName( 'input' )->item(0);
    $onclick = $input->getAttribute( 'onclick' );
    $onclick .= " setTimeout(alert, 2000, test);"; // Here's the JS function we're calling on click.
    $input->setAttribute( 'onclick', $onclick );
    return $dom->saveHtml( $input );
}

I’m a noob to all this and just slapped some things together I found on google. To make things simple I’m just trying to get this div to show on screen for x time after button click.

Here is what’s currently inside an html field in the form:

jQuery.noConflict();
  jQuery(document).ready(function($) {

  		$("#gform_wrapper_1").after("<div id='fakeprogress'><h2>Uploading Files.. Please Wait</h2></div>");
  		$("#fakeprogress").hide();
		$("input#gform_next_button_1_5").click(function () {
   			$("#fakeprogress").delay(100).show('slow');
		});

  });

In summary: I’m able to show the div on click but the user gets navigated to the next page almost instantly instead of delaying however long I want.

2

Do you have the URL of a page where we can see this in action?

3

@chrishajer Yes you can find it here: https://www.quantumsolar.co/qualify-short-gf/