Gravity Forms CSS spinner

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:

 

 

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.

 

 

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.