Change Gravity Forms spinner image to custom image and show it above a semi-transparent layer

We do a lot of projects using Gravity Forms. When AJAX is enabled on form submission the spinner is very small and unobtrusive. The ideal is having a nice full screen loader icon that is overlays on a semi-transparent background and gives your site that app-like feel.

Step 1: Add this code to your functions.php file

add_filter("gform_ajax_spinner_url", "spinner_url", 10, 2);
function spinner_url($image_src, $form){
return get_bloginfo('template_directory') . '/images/blank.gif' ; // relative to your theme images folder
}

Make sure the file blank.gif is a transparent 1px x 1px gif file. This will overwrite the existing Gravity Forms gif.

Step 2: Add this code to your CSS file (style.css)
img.gform_ajax_spinner {
position: fixed !important;
z-index: 999999;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block !important;
overflow: hidden !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(0,0,0);
/* fall back */
background-color: rgba(0,0,0,0.7);
url('images/preloading.gif'); /* fallback GIF spinner */
background-image: linear-gradient(transparent,transparent), url('images/oval.svg'); /* SVG spinner */
background-repeat: no-repeat;
background-size: 60px 60px;
background-position: center center;
}

Please note: for the SVG spinner to work, you need to enable the SVG mime type in WordPress. This is disabled by default and WordPress will not recognise SVG, add this to your functions.php file
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

If the user’s browser does not support SVG the fallback .gif file will be used.