I am using this code to center a custom ajax spinner for gravity forms submission.
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.
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;
}
I am using this code to center a custom ajax spinner for gravity forms submission.
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.
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;
}
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.
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/