Change the default Gravity Forms AJAX spinner

The default gravity form spinner is ugly. Use the following to change it to a new spinner:

/* https://thomasgriffin.io/change-default-gravity-forms-ajax-spinner/ */
add_filter( 'gform_ajax_spinner_url', 'ns_io_custom_gforms_spinner' );
/**
 * Changes the default Gravity Forms AJAX spinner.
 *
 * @since 1.0.0
 *
 * @param string $src  The default spinner URL.
 * @return string $src The new spinner URL.
 */
function ns_io_custom_gforms_spinner( $src ) {

    return get_stylesheet_directory_uri() . '/img/ajax-loader.gif';
    
}

You can grab a pretty spinner for your design, here:

http://spiffygif.com/

It does need to be a gif file, as Gravity Forms by default, using an image. Sorry, no fancy all-css solutions.

Finally, you’ll need to adjust your CSS. The spinner usually ends up being next to the form button, which it’d be nicer to be on TOP of the form button.

You’ll need to adjust this SCSS, but this is more or less what you’ll want to do. (FYI, this solution is using bourbon a function to do the transform)

	.gform_footer {
		position: relative;

		.gform_ajax_spinner {
			position: absolute;
			top: 14px;
			left: 50%;
			@include transform(translateX(-50%));
		}

		input.disabled {
			background-color: $gray-blue;
		}

	}