Как исправить загрузчик / спиннер анимации CSS, не работающий в браузерах IOS Chrome, Safari? - PullRequest
Новая
       23

Как исправить загрузчик / спиннер анимации CSS, не работающий в браузерах IOS Chrome, Safari?

0 голосов
/ 08 июня 2019

У меня есть loader/spinner, который отлично работает в браузере Chrome с Windows для ноутбуков, а также отлично работает в браузерах Chrome для Android, но, к сожалению, не работает в браузерах IOS, например, Safari, Chrome. Не отображать загрузчик анимации в браузерах IOS.Пожалуйста, помогите мне решить эту проблему.Я хочу показать, что анимация / загрузчик работает во всех браузерах и на всех мобильных устройствах с операционной системой. 

<script type="text/javascript">
function ShowProgress() {
    setTimeout(function () {
        var modal = $('<div />');
        modal.addClass("modal");
        $('body').append(modal);
        var loading = $(".loading");
        loading.show();
        var top = Math.max($(window).height() / 2 - 
        loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth 
    / 2, 0);
        loading.css({ top: top, left: left });
    }, 200);
    }
    $('form').live("submit", function () {
    ShowProgress();

    });

  </script>
<style type="text/css">
    body { 
margin:0;
   }
.modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
  }
.loading
{
      display : none;
position : fixed;
z-index: 100;

 background-color:#666;
opacity : 0.9;
background-repeat : no-repeat;
background-position : center;
left : 0;
bottom : 0;
right : 0;
top : 0;
color:white;
}

.center {
position: absolute;

width: 100px;
height: 50px;
top: 50%;
left: 51%;
margin-top: -25px;
margin-left: -50px;
font-weight:bold;
 }

.spinner {
  margin: 100px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
position: absolute;
width: 100px;
height: 50px;
top: 65%;
left: 50%;
margin-top: -25px;
margin-left: -50px;
  }

  .spinner > div {
 background-color: white;
 height: 100%;
  width: 6px;
 display: inline-block;
  color:white;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
 animation: sk-stretchdelay 1.2s infinite ease-in-out;

   }

   .spinner .rect2 {
  -webkit-animation-delay: -1.1s;
   animation-delay: -1.1s;
   color:white;
    }

   .spinner .rect3 {
   -webkit-animation-delay: -1.0s;
     animation-delay: -1.0s;
     color:white;
    }

       .spinner .rect4 {
     -webkit-animation-delay: -0.9s;
     animation-delay: -0.9s;
     color:white;
     }

       .spinner .rect5 {
      -webkit-animation-delay: -0.8s;
     animation-delay: -0.8s;
      color:white;
       }

    @-webkit-keyframes sk-stretchdelay {
     0%, 40%, 100% { -webkit-transform: scaleY(0.4);-webkit-overflow- 
     scrolling: 
    touch; }  
   20% { -webkit-transform: scaleY(1.0);-webkit-overflow-scrolling: touch; 
           }
    }

   @-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
   -webkit-transform: scaleY(0.4);
   -webkit-overflow-scrolling: touch;
    }  20% { 
    transform: scaleY(1.0);
   -webkit-transform: scaleY(1.0);
   -webkit-overflow-scrolling: touch;
      }
    }

    </style> 

   <body>
     <div class="loading">
       <div class="spinner">
   <div class="rect1"></div>
   <div class="rect2"></div>
   <div class="rect3"></div>
   <div class="rect4"></div>
    <div class="rect5"></div>
   </div>
   <p class ="center">Collecting Your Slides</p>

    </div>
     </body>
...