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.

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 filefunction 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.