https://legacy.forums.gravityhelp.com/topic/change-the-spinner-image-show-it-above-a-semi-transparent-layer Gravity Support Forums Topic: Change the spinner image & show it above a semi-transparent layer en-US Sat, 04 Apr 2026 09:41:10 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/change-the-spinner-image-show-it-above-a-semi-transparent-layer#post-74158 Thu, 06 Sep 2012 08:12:39 +0000 Chris Hajer 74158@https://legacy.forums.gravityhelp.com/ <p>Thanks for the update @leac. </p> https://legacy.forums.gravityhelp.com/topic/change-the-spinner-image-show-it-above-a-semi-transparent-layer#post-74137 Thu, 06 Sep 2012 05:13:22 +0000 Lea Cohen 74137@https://legacy.forums.gravityhelp.com/ <p>Again thank you very much Josh!</p> <p>Actually, I didn't need it in a fixed position, because it doesn't need to cover the whole screen (sorry that the image was misleading), but only the form.<br /> In order to do that, I changed it to position absolute, but the problem was that my <code>.gform_footer</code> has position relative for other reasons, so this couldn't work. But otherwise, it was an excellent solution, and I learned how to change the image if I ever need it, so I really appreciate your help :) </p> https://legacy.forums.gravityhelp.com/topic/change-the-spinner-image-show-it-above-a-semi-transparent-layer#post-66996 Thu, 19 Jul 2012 07:55:06 +0000 Josh 66996@https://legacy.forums.gravityhelp.com/ <p>OK, if you put this in your theme functions...</p> <pre><code>add_filter(&quot;gform_ajax_spinner_url&quot;, &quot;spinner_url&quot;, 10, 2); function spinner_url($image_src, $form){ return get_bloginfo(&#39;template_directory&#39;) . &#39;/images/blank.gif&#39; ; // relative to you theme images folder }</code></pre> <p>or if it specifically for form ID 6, add the ID number after <code>gform_ajax_spinner_url</code> like this...</p> <pre><code>add_filter(&quot;gform_ajax_spinner_url_6&quot;, &quot;spinner_url&quot;, 10, 2); function spinner_url($image_src, $form){ return get_bloginfo(&#39;template_directory&#39;) . &#39;/images/blank.gif&#39; ; }</code></pre> <p>And then if you use my original css in your style.css ( in my example below I have specified my class to form ID 6).</p> <pre><code>#gform_wrapper_6 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); background-image: url(&#39;images/preloading.gif&#39;); /* path to your new spinner */ background-repeat: no-repeat; background-size: 60px 60px; background-position: center center; }</code></pre> <p>Give it ago but otherwise see what the experts can suggest.</p> <p>See documentation here.<br /> <a href="http://www.gravityhelp.com/documentation/page/Gform_ajax_spinner_url" rel="nofollow">http://www.gravityhelp.com/documentation/page/Gform_ajax_spinner_url</a> </p> https://legacy.forums.gravityhelp.com/topic/change-the-spinner-image-show-it-above-a-semi-transparent-layer#post-66993 Thu, 19 Jul 2012 07:00:56 +0000 Lea Cohen 66993@https://legacy.forums.gravityhelp.com/ <p>Thanks, Josh, but you're right that changing the image in the gravity forms plugin folder is what seems problematic to me. I want to know if there is a way to tell the form to use an image from a different folder. </p> https://legacy.forums.gravityhelp.com/topic/change-the-spinner-image-show-it-above-a-semi-transparent-layer#post-66992 Thu, 19 Jul 2012 06:12:10 +0000 Josh 66992@https://legacy.forums.gravityhelp.com/ <p>I don't know if this helps you...</p> <p>You can put this in your style.css with the relavant path to your new spinner.gif</p> <pre><code>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); background-image: url(&#39;images/preloading.gif&#39;); /* path to your new spinner */ background-repeat: no-repeat; background-size: 60px 60px; background-position: center center; }</code></pre> <p>And then you have to replace the spinner.gif with a transparent 1px x 1px gif - but replace spinner.gif with the same file name.</p> <p>This is located in your images folder in the gravity form plugins folder.</p> <p>I have not tested it in all browsers and I'm not sure if it recommended to change the current spinner.gif incase it's used in the admin or else where. Plus if you do an update you will have to remember to replace it again with a transparent gif.</p> <p>I'm sure someone could write some jQuery to edit the attribute of the spinner img to a blank.gif in your theme images folder. </p> https://legacy.forums.gravityhelp.com/topic/change-the-spinner-image-show-it-above-a-semi-transparent-layer#post-66989 Thu, 19 Jul 2012 04:42:42 +0000 Lea Cohen 66989@https://legacy.forums.gravityhelp.com/ <p>Is it possible to replace the spinner image with out own custom image?</p> <p>And also - is it possible to make it appear as if its above a semi-transparent layer on the form?</p> <p>This is an <a href="http://dev.linux.ort.org.il/singa/wp-content/themes/singalovsky/images/1.jpg" rel="nofollow">image</a> of what I'm trying to achieve </p>