02 Sep 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.
Article reposted from: https://louisnel.co.za/blog/change-the-spinner-image-show-it-above-a-semi-transparent-layer/
James
Posted at 06:50h, 06 Decemberhow to make a exiting delay and transition animation on it?