title: Loading animation is not working across browsers
body: <p>I have a basic loading animation. It is supposed to run when a user clicks on an upload button. </p>
  
  <p>Now it works perfectly in Chrome and UC Browser. But it isn't working in Safari and Opera Mini. I must support these browsers too. </p>
  
  <p>First time developing such stuff, hence confused about where am I going wrong. Is it my CSS which isn't working is it that my jQuery isn't executing?</p>
  
  <p>My HTML code:</p>
  
  <pre><code>  {{ form.photo1 }}
    &lt;div class="loader"&gt;
        &lt;div class="spinner"&gt;&lt;/div&gt;
    aik min&lt;/div&gt;
    &lt;input type="submit" class="UploadBtn btn bl cl bco mbs mts" style="border-color:#f57c00;" value="Upload"&gt;
  </code></pre>
  
  <p>My CSS code:</p>
  
  <pre><code>.loader {
      font-size: 20px;
      font-family: serif;
      color: #00C853;
      display: none;
  }
  .spinner {
      border: 5px solid #f3f3f3;
      border-radius: 50%;
      border-top: 5px solid #FFA000;
      border-right: 5px solid #00C853;
      border-bottom: 5px solid #FF9933;
      border-left: 5px solid #00C853;
      width: 50px;
      height: 50px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      display: none;
  
  }
  @-webkit-keyframes spin {
    0% {
      transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      /* added vendor specific css (IE) */
      -webkit-transform: rotate(0deg);
      /* added vendor specific css (Safari, Opera , Chrome) */
    }
    100% {
      transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      /* added vendor specific css (IE) */
      -webkit-transform: rotate(360deg);
      /* added vendor specific css (Safari, Opera , Chrome) */
    }
  }
  
  @-o-keyframes spin {
    0% {
      transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      /* added vendor specific css (IE) */
      -webkit-transform: rotate(0deg);
      /* added vendor specific css (Safari, Opera , Chrome) */
    }
    100% {
      transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      /* added vendor specific css (IE) */
      -webkit-transform: rotate(360deg);
      /* added vendor specific css (Safari, Opera , Chrome) */
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      /* added vendor specific css (IE) */
      -webkit-transform: rotate(0deg);
      /* added vendor specific css (Safari, Opera , Chrome) */
    }
    100% {
      transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      /* added vendor specific css (IE) */
      -webkit-transform: rotate(360deg);
      /* added vendor specific css (Safari, Opera , Chrome) */
    }
      }
  </code></pre>
  
  <p>My jQuery code:</p>
  
  <pre><code>$(document).ready(function() {
      $(document).on("click", ".UploadBtn", function(event) {
          $(".p").each(function(file) {
              if  ($(this).val()) {
                  $(".loader").show();
                  $(".spinner").show();
                  $("#overlay").show();
              }
          })
      });
  });
  </code></pre>
  
  <p>Please note that 'p' class is for <code>{{ form.photo1 }}</code> which is written in Django. </p>