Transparent Overlay for Gravity Forms Ajax Spinner

Question

I am using this code to center a custom ajax spinner for gravity forms submission.

1. The spinner is centered based on the location of the gravity forms. I would like the spinner to be always centered horizontally and vertically, irrespective of the scroll position of the user.

2. In addition, the semi-transparent background overlay background-color: rgba(255,255,255,0.5) does not work. I have tried different variations, but I couldn't get a semi-transparent full page background overlay for the spinner.

    /* Absolute Center Spinner */
    .gform_wrapper .gform_ajax_spinner {
      position: fixed;
      z-index: 999;
      overflow: show;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 120px;
      height: 120px;
    }
   
    /* Transparent Overlay */
    .gform_wrapper .gform_ajax_spinner:before {
      content: '';
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,0.5) !important;
    }
   

Answer 1

I don't think the :before selector can be a full screen overlay when the parent is set to fixed, it will only consume the height/width of the parent element. This certainly works (adjusted elements and css classes aside).

<style type="text/css">  
.myspinner {
    position: fixed;
    z-index: 100002;
    background:red;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
    width: 120px;
    height: 120px;
}

#spinner-overlay {
    background-color: rgba(255,255,255,0.8)!important;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 100000;
    top: 0;
    left: 0;
}
</style>

<div id="spinner-overlay">
    <div class="myspinner"></div>
</div>

Gravity Forms has a variety of filter/action hooks, i had a little look and couldn't find an appropriate one (that's not to say there isn't, it's had to say when the code isn't openly accessible).

You could try adding a parent element to the spinner with jQuery as a hacky way to create a parent overlay element you can target with the CSS.

    (function($) {
        $('.gform_ajax_spinner').wrap('<div id="spinner-overlay"></div>');
    })(jQuery);

This really is a question better suited to the GF support channels and i noticed your support thread on their website whilst searching, so hopefully they can better advise you on this.

Answer 2

You can use the below codes to get full control over the spinner

first create a gif file 1px X 1px ( smaller size is best) and name it as "blank.gif" ( you can create it in MS paint and make it transparent used any tool or use online tool https://www8.lunapic.com/editor/?action=transparent

Secondly create a custom spinner for your purpose and name it like "preloader.gif"

You can create one from here : https://loading.io/spinner/rolling/-bar-circle-curve-round-rotate

Upload both to your server and get the URL for the image

Next we need to change the default spinner to a custom spinner For that we have to change the existing spinner used below code

//hide the existing spinner - add below code to function.php

add_filter("gform_ajax_spinner_url", "spinner_url", 10, 2);
function spinner_url($image_src, $form){
    return "image-source-url/blank.gif";
}

Next add the below code to your theme custom CSS

 /* change spinner style */
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: white;
    opacity: 0.8; /* adjust the back ground transparency */
    url('image-source-url/preload.gif'); /* fallback GIF spinner */
    background-image: linear-gradient(transparent,transparent), url('image-source-url/preload.gif'); /* SVG spinner */
    background-size: 100px 100px; /* set the spinner size you need */
    background-position: center center;
    background-repeat: no-repeat !important;
}

Code Source : https://louisnel.co.za/blog/change-the-spinner-image-show-it-above-a-semi-transparent-layer/