title: CSS/JQuery Loading Animation not working in Safari
body: <p>I have been trying to add a jquery Loading Indicator to my website:</p>
  
  <p><a href="https://www.jqueryscript.net/demo/Creating-A-Loading-Indicator-with-jQuery-CSS3/" rel="nofollow noreferrer">https://www.jqueryscript.net/demo/Creating-A-Loading-Indicator-with-jQuery-CSS3/</a></p>
  
  <p>The below call works as expected on all browsers except MacOS Safari (does work in iOS)</p>
  
  <p>In MacOS Safari it simply does not show, I can trigger the animation by preventing the submit, but cannot load the animation and submit as desired.</p>
  
  <p>The submit runs a php script which works as expected.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $('#login-form').submit(function() {
              $('body').loadingIndicator();
              return true;
          });
      });
  &lt;/script&gt; 
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;form class="login-form" id="login-form" method="post" action="user_forgot.php"&gt;
          &lt;input type="text" placeholder="Email" name="user_email"&gt;
          &lt;input type="submit" name="reset_password" id="reset_password" VALUE = "Reset Password"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I have tried so many different ideas suggested, including onClick, ePrevent, programmatically calling submit via a Button, calling the loader via a variable and many others without success. </p>
  
  <p>I am at a loss on how to get this to function in MacOS Safari.</p>
  
  <p>Any suggestions or functional alternatives would be most welcome.</p>