Прозрачный оверлей для спиннера Ajax Gravity Forms

Я использую этот код для центрирования пользовательского ajax индикатора во время отправки форм Gravity.

1. Индикатор центрируется в зависимости от положения форм Gravity. Я хотел бы, чтобы индикатор всегда был центрирован горизонтально и вертикально, независимо от положения прокрутки пользователя.

2. Кроме того, полупрозрачная фоновая накладка background-color: rgba(255,255,255,0.5) не работает. Я пробовал различные вариации, но не смог получить полупрозрачную фоновую накладку на всю страницу для индикатора.

    /* Абсолютный центр индикатора */
    .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;
    }
   
    /* Прозрачная накладка */
    .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;
    }
   

Я не думаю, что селектор :before может быть накладкой на весь экран, когда родитель установлен на fixed, он будет использовать только высоту/ширину родительского элемента. Это определенно работает (если оставить в стороне скорректированные элементы и css-классы).

<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 имеет множество фильтров/действий, я немного посмотрел и не смог найти подходящий (это не значит, что его нет, тяжело сказать, когда код не является открытым для доступа).

Вы можете попробовать добавить родительский элемент к индикатору с помощью jQuery в качестве хакерского способа создать родительский элемент накладки, с которым вы сможете работать с CSS.

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

Это действительно вопрос, который лучше задать в каналах поддержки GF, и я заметил вашу тему поддержки на их сайте во время поиска, так что надеюсь, они смогут лучше вас проконсультировать по этому вопросу.

Вы можете использовать коды ниже, чтобы получить полный контроль над индикатором

Сначала создайте файл gif 1px X 1px (меньший размер лучше) и назовите его “blank.gif” (вы можете создать его в MS Paint и сделать его прозрачным, используя любой инструмент, или использовать онлайн-инструмент https://www8.lunapic.com/editor/?action=transparent

Во-вторых, создайте пользовательский индикатор для вашей цели и назовите его, например, “preloader.gif”

Вы можете создать его здесь: https://loading.io/spinner/rolling/-bar-circle-curve-round-rotate

Загрузите оба на свой сервер и получите URL для изображения

Далее нам нужно изменить стандартный индикатор на пользовательский. Для этого мы должны изменить существующий индикатор, используя код ниже

//скрыть существующий индикатор – добавьте код ниже в function.php

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

Затем добавьте код ниже в свой пользовательский 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: white;
    opacity: 0.8; /* настройте прозрачность фона */
    url('image-source-url/preload.gif'); /* запасной GIF индикатор */
    background-image: linear-gradient(transparent,transparent), url('image-source-url/preload.gif'); /* SVG индикатор */
    background-size: 100px 100px; /* установите нужный вам размер индикатора */
    background-position: center center;
    background-repeat: no-repeat !important;
}

Источник кода: https://louisnel.co.za/blog/change-the-spinner-image-show-it-above-a-semi-transparent-layer/