Loading animation is not working across browsers

Question

I have a basic loading animation. It is supposed to run when a user clicks on an upload button.

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.

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?

My HTML code:

  {{ form.photo1 }}
  <div class="loader">
      <div class="spinner"></div>
  aik min</div>
  <input type="submit" class="UploadBtn btn bl cl bco mbs mts" style="border-color:#f57c00;" value="Upload">

My CSS 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) */
  }
    }

My jQuery code:

$(document).ready(function() {
    $(document).on("click", ".UploadBtn", function(event) {
        $(".p").each(function(file) {
            if  ($(this).val()) {
                $(".loader").show();
                $(".spinner").show();
                $("#overlay").show();
            }
        })
    });
});

Please note that 'p' class is for {{ form.photo1 }} which is written in Django.

Answer 1

According to Can I use animation and transform is not supported in Opera mini and very old versions of Safari. Therefore your only chance is to fallback to JS animations in those browsers or better use an animated gif as a loading animation.