Question

我有一个基本的加载动画。它应该在用户点击上传按钮时运行。

现在它在Chrome和UC浏览器中运行良好。但它并不适用于Safari和Opera Mini。我也必须支持这些浏览器。

第一次开发这样的东西，因此对我错在哪里感到困惑。是不是我的CSS没有工作，我的jQuery是不是正在执行？

我的HTML代码：

  {{ 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">

我的CSS代码：

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

我的jQuery代码：

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

请注意＆＃39; p＆＃39; class用于{{ form.photo1 }}，用Django编写。

Answer 1

根据Can I use animation而言，Opera mini和非常旧版本的Safari不支持transform。因此，您唯一的机会是在这些浏览器中回退到JS动画，或者更好地使用动画gif作为加载动画。

加载动画不适用于各种浏览器

1 个答案: