mattrad

When you submit a form the Gravity Forms default spinner appears. It is a gif, which doesn’t look great when used on anything but a white background, and isn’t retina-friendly. Let’s sort that out.

RocketGenius have documentation for the ajax spinner and from that I’ve created a filter:

function gf_spinner_replace( $image_src, $form ) {
	return  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; // relative to you theme images folder
}
add_filter( 'gform_ajax_spinner_url', 'gf_spinner_replace', 10, 2 );

This replaced the default loader.gif with a base64-encoded transparent gif, taken from a CSS Tricks code snippet. I then added some CSS modified from @lukehass‘ Single Element CSS Spinners.

.gform_ajax_spinner {
	margin-left: 20px;	/* give it some space from the Submit button */
	border: 4px solid rgba(255, 255, 255, 0.3);	/* match with border-left */
	border-left: 4px solid gold;
	animation: spinner 1.1s infinite linear;
	border-radius: 50%;
	width: 30px;					/* match with height for a circle */
	height: 30px;
}
@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

The CSS above isn’t prefixed, so run it through autoprefixer or similar. You could also easily replace the blank loader gif with an SVG instead for endless customised spinners.