Transparent Overlay for Gravity Forms Ajax Spinner

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.

Related Posts: