时间戳

首页 > 解决方案 > Font Awesome fa-circle-o-notch fa-spin not spin on safari

javascript - Font Awesome fa-circle-o-notch fa-spin not spin on safari

问题描述

我的加载屏幕是我在更改选项时显示的模式。在模态中，我有一个旋转的字体 Awsome fa-circle-o-notch。在 Firefox 或 Google Chrome 中，圆圈旋转，但在 safari 中不会这样做，至少我在调用时调用 settimeout$('#blocking-modal').modal('show');或通过 safari 的调试器控制台进行调试。

这是模态的代码：

$("#saveBtn").click(function (e) {
            $('#blocking-modal').modal('show');
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Ej0hUpn6wbrOTJtRExp8jvboBagaz+Or6E9zzWT+gHCQuuZQQVZUcbmhXQzSG17s" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" integrity="sha384-VI5+XuguQ/l3kUhh4knz7Hxptx47wpQbVRDnp8v7Vvuhzwn1PEYb/uvtH6KLxv6d" crossorigin="anonymous"></script>
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-X7L1bhgb36bF1iFvaqvhgpaGpayKM+vXNNYRlF89BFA5s3vi1qZ8EX9086RlZjy1" crossorigin="anonymous">
 
</head>
<body>
<div class="modal" id="blocking-modal" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-describedby="waiting" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" align="center" style="font-size: 30px;background-color: black ; color: white;height: 0px;width:0px;margin-left: auto;margin-right: auto;margin-top: 48%;padding-top: 1px; ">
            <span style="display:block"><i id="blockSpinner" class="fa fa-circle-o-notch fa-1x fa-spin" style="display:inline-block"></i></span>                
        </div>
    </div>
</div>
<div>
<button type="submit" id="saveBtn" class="btn btn-primary">
       Accept
    </button>
</div>

</body>

谢谢您的帮助。

标签： javascriptjquerytwitter-bootstrap-3bootstrap-modalfont-awesome

解决方案

推荐阅读