Preloader не работает, когда сайт загружен в iPhone - PullRequest
Новая
       51

Preloader не работает, когда сайт загружен в iPhone

0 голосов
/ 29 февраля 2020

Может кто-нибудь помочь мне, почему мой прелоадер не будет работать, если веб-сайт открыт с помощью iPhone?

Работает на android телефоне и ноутбуке. Загрузчик должен быть анимированным, но он только c на iPhone. Я использую AJAX для размещения данных, когда пользователь нажимает на кнопку входа и показывает загрузчик. Вот мой код. Ниже изображение от iPhone. Пожалуйста, помогите.

CSS: 

@import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700);
@import url(https://fonts.googleapis.com/css?family=Eczar);

.dx-context_bg {
  margin: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

.pre_loader-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.pre_loader {
  display: block;
  position: absolute;
  top: 50%;
  left: 49%;
  width: 58px;
  height: 86px;
  margin-top: -43px;
  margin-left: -29px;
  font-family: "Bookman Old Style", sans-serif;
  line-height: 42px;
  overflow: hidden;
  opacity: 0;
  animation: Loader 10s ease-in-out infinite;
  -webkit-animation: Loader 10s ease-in-out infinite;
}
.pre_loader * {
  display: block;
  position: absolute;
}

@-webkit-keyframes Loader {
  5%,
  100% {
    opacity: 1;
  }
  30% {
    width: 58px;
    margin-left: -29px;/* Prevent Object Moment from Beginning */
  }
  40%,
  82% {
    width: 180px;
    margin-left: -65px;
  }
  86%,
  100% {
    width: 4px;
    margin-left: 2px;
  }
}

@keyframes Loader {
  5%,
  100% {
    opacity: 1;
  }
  30% {
    width: 58px;
    margin-left: -29px;/* Prevent Object Moment from Beginning */
  }
  40%,
  82% {
    width: 180px;
    margin-left: -65px;
  }
  86%,
  100% {
    width: 4px;
    margin-left: 2px;
  }
}
.pre_loader .dx_rectangle {
  left: 0;
  bottom: 20px;
  width: 58px;
  height: 66px;
  border: 2px solid #313131;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #fff;
}
.pre_loader .dx_rectangle span {
  left: 24px;
  bottom: 3px;
  font-size: 36px;
  font-weight: 700;
  color: #000000;
  animation: FillSpan 10s ease-in-out infinite;
  -webkit-animation: FillSpan 10s ease-in-out infinite;
}
.pre_loader .dx_rectangle.dx_outlines {
  animation: Outlines 10s ease-in-out infinite;
  -webkit-animation: Outlines 10s ease-in-out infinite;
}
.pre_loader .dx_rectangle.dx_fill {
  height: 4px;
  border-color: transparent;
  background-color: #5f5f5f;
  animation: Fill 10s ease-in-out infinite;
  -webkit-animation: Fill 10s ease-in-out infinite;
}
.pre_loader .dx_rectangle.dx_fill span {
  color: #fff;
}

@-webkit-keyframes Outlines {
  82% {
    width: 58px;
    height: 66px;
    bottom: 20px;
  }
  85%,
  100% {
    width: 4px;
    bottom: 0;
  }
  85%,
  86% {
    height: 86px;
    border-width: 2px;
  }
  89%,
  100% {
    height: 0;
    border-width: 0;
  }
}

@keyframes Outlines {
  82% {
    width: 58px;
    height: 66px;
    bottom: 20px;
  }
  85%,
  100% {
    width: 4px;
    bottom: 0;
  }
  85%,
  86% {
    height: 86px;
    border-width: 2px;
  }
  89%,
  100% {
    height: 0;
    border-width: 0;
  }
}

@-webkit-keyframes Fill {
  30%,
  100% {
    height: 66px;
  }
  30% {
    background-color: #3e3e3e;
  }
  40%,
  100% {
    background-color: #000000;
  }
  82% {
    width: 58px;
    height: 66px;
    bottom: 20px;
  }
  85%,
  100% {
    width: 4px;
    bottom: 0;
  }
  85%,
  86% {
    height: 86px;
    border-width: 2px;
  }
  89%,
  100% {
    height: 0;
    border-width: 0;
  }
}

@keyframes Fill {
  30%,
  100% {
    height: 66px;
  }
  30% {
    background-color: #3e3e3e;
  }
  40%,
  100% {
    background-color: #000000;
  }
  82% {
    width: 58px;
    height: 66px;
    bottom: 20px;
  }
  85%,
  100% {
    width: 4px;
    bottom: 0;
  }
  85%,
  86% {
    height: 86px;
    border-width: 2px;
  }
  89%,
  100% {
    height: 0;
    border-width: 0;
  }
}

@-webkit-keyframes FillSpan {
  80% {
    left: 24px;
  }
  84%,
  100% {
    left: -34px;
  }
  82% {
    bottom: 3px;
  }
  85%,
  100% {
    bottom: 9px;
  }
}

@keyframes FillSpan {
  80% {
    left: 24px;
  }
  84%,
  100% {
    left: -34px;
  }
  82% {
    bottom: 3px;
  }
  85%,
  100% {
    bottom: 9px;
  }
}
.pre_loader .dx_rinkin_coffee {
  left: -220px;
  top: 19px;
  width: fit-content;
  animation: rinkinCoffee 10s ease-in-out infinite;
  -webkit-animation: rinkinCoffee 10s ease-in-out infinite;
}
.pre_loader .dx_rinkin_coffee span {
  display: inline-block;
  position: static;
  color: #313131;
}
.pre_loader .dx_rinkin_coffee span.dx_rinkin {
  font-size: 36px;
  font-weight: 700;
}
.pre_loader .dx_rinkin_coffee span.dx_coffee {
  font-family: "Monospace", serif;
  font-size: 41px;
  font-weight: 400;
}

@-webkit-keyframes rinkinCoffee {
  30% {
    left: -220px;
  }
  40%,
  82% {
    left: 62px;
  }
  86%,
  100% {
    left: -260px;
  }
}

@keyframes rinkinCoffee {
  30% {
    left: -220px;
  }
  40%,
  82% {
    left: 62px;
  }
  86%,
  100% {
    left: -260px;
  }
}
.pre_loader .dx_slogan {
  left: 100px;
  bottom: 0;
  width: fit-content;
  font-size: 12px;
  line-height: 16px;
  color: #313131;
  opacity: 0;
  animation: Slogan 10s ease-in-out infinite;
  -webkit-animation: Slogan 10s ease-in-out infinite;
}

@-webkit-keyframes Slogan {
  42% {
    opacity: 0;
  }
  48%,
  100% {
    opacity: 1;
  }
  81% {
    right: 2px;
  }
  86%,
  100% {
    right: 58px;
  }
}

@keyframes Slogan {
  42% {
    opacity: 0;
  }
  48%,
  100% {
    opacity: 1;
  }
  81% {
    right: 2px;
  }
  86%,
  100% {
    right: 58px;
  }
}

jQuery: 

$("#login-btn").click(function(){
  var username = $('#username').val();
  var password = $('#password').val();
  console.log("login button click");
      $.ajax({
       type: 'POST',
       url: baseURL + "login/user_login_new",
       dataType : 'json',
       data: {
            username:username,
            password:password},
       beforeSend: function(){
        $("#newloader").show();
       },
       success: function(response){
                // console.log(response);
                 if(response == 1){
                    console.log("success");
                    window.location.href = baseURL + "dashboard/view";
                 }else if(response == 0){
                    console.log("failed");
                    window.location.href = "login";
                 }else if(response == 2){
                    var previousURL = "<?php  echo $this->session->userdata('previous_url'); ?>";
                    console.log("success");
                    window.location.href = previousURL;
                 }
       },
       complete : function() {
            console.log("complete");
        // This will run after sending an Ajax complete
        }
      });

});

Here is the image when the website is opened using iPhone

...