Я пытался показать анимацию загрузчика при перенаправлении страницы, перенаправление было инициировано через форму отправки. Но анимация не работает в Safari и IE. Пробовал CSS анимацию по ключевым кадрам, GIF и видео, ничего не работает. GIF и видео не воспроизводятся, они просто показывают статичное изображение. Столкнувшись с этой проблемой в Safari и IE11.

0
Sivanatarajan 20 Дек 2019 в 17:19
Счетчик коллекций над списком кортежей
 – 
Germano Plebani
20 Дек 2019 в 17:24
Что ж, Foo foo = new Foo(); foo.doIt(); является подклассом NullPointerException, так что в этом нет необходимости. Foo ведет себя как обычный словарь.
 – 
Deepak-MSFT
20 Дек 2019 в 18:24

1 ответ

Есть ли решение этой проблемы? Извините, если мой вопрос слишком простой, но я новичок во всем этом :)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">

<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">
  <h2>Tada!</h2>
  <p>Some text in my newly loaded page..</p>
</div>

<script>
var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}
</script>

</body>
</html>

Вывод в браузере IE 11:

enter image description here

0
Deepak-MSFT 20 Дек 2019 в 18:31
Я использую систему сетки DateTime для создания компонента ответа. С соотношением столбцов 1:11 для значка и столбца ответа соответственно. Ниже приведен код для него
 – 
Sivanatarajan
21 Дек 2019 в 16:22
Затем вы можете попробовать разместить этот код на странице, с которой вы нажимаете кнопку отправки. поэтому загрузчик будет отображаться после того, как пользователь нажмет кнопку отправки, и он исчезнет, ​​когда загрузится новая страница. Нет возможности показать загрузчик между перенаправлениями.
 – 
Deepak-MSFT
23 Дек 2019 в 12:46