Change the default Gravity Forms AJAX spinner

By North Street, A Creative Studio

The default gravity form spinner is ugly. Use the following to change it to a new 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:

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;



About north street

We engineer the thoughtful transformation of great organizations. Our proven process helps us understand what your competitors are doing right — and wrong. Want to learn more? Let’s chat.

More Notes

Photo of Tom Conlon

CEO Tom Conlon in Conversation with Chris White

Designing for Interaction: How Animated Prototypes Revolutionize Website Development

man with arms folded in front of blue city background

Team Spotlight: Cristian Sánchez, Lead Developer