Matt Radford

Messing with links since <blink>

Gravity Forms CSS spinner

Published on 

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 @lukehassSingle 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.