Gravity Forms CSS spinner
Published onWhen 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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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.