Я хочу использовать анимацию загрузки CSS3, которая похожа на загрузчик видео HTML5 - PullRequest
Новая
       4

Я хочу использовать анимацию загрузки CSS3, которая похожа на загрузчик видео HTML5

0 голосов
/ 17 марта 2020

У меня сейчас есть несколько кодов, но они не выглядят «естественно», как загрузчик видеоэлемента HTML5.

Как я могу настроить этот загрузчик CSS3 так, чтобы он был больше похож на загрузчик видеоэлемента?

Прямо сейчас у меня есть 2 элемента, постоянно вращающихся с небольшой задержкой между ними.

Я просто не вижу, нужно ли увеличивать эту задержку или мне нужна более сложная анимация с Безье: 

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}
.loader {
  color: #555555;
  margin: 15px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 0.4em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before,
.loader:after {
  position: absolute;
  content: '';
}
.loader:before {
  width: 5.2em;
  height: 10.4em;
  background: black;
  border-radius: 10.4em 0 0 10.4em;
  top: -0.2em;
  left: -0.2em;
  -webkit-transform-origin: 5.2em 5.2em;
  transform-origin: 5.2em 5.2em;
  -webkit-animation: load 1.2s infinite ease 0.2s;
  animation: load 1.2s infinite ease 0.2s;
  transition-timing-function: cubic-bezier(1.0, 0.5, 1.0, 0.1);
}
.loader:after {
  width: 5.2em;
  height: 10.4em;
  background: black;
  border-radius: 0 10.4em 10.4em 0;
  top: -0.2em;
  left: 5.0em;
  -webkit-transform-origin: 0.0em 5.2em;
  transform-origin: 0.0em 5.2em;
  -webkit-animation: load 1.2s infinite ease;
  animation: load 1.2s infinite ease;
  transition-timing-function: cubic-bezier(0.1, 1.0, 0.5, 1.0);
}
@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader .label {
font-size: 16px;
position: absolute;
top: 110%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body bgcolor=black>

<h2>How To Create A Loader</h2>

<div class="loader"><div class="label">Loading...</div></div>

</body>
</html>

Например, вот простой прядильщик, который я ищу (он также меняет свой цвет, но он вне этого вопроса): enter image description here

Материальный дизайн также использует это как загрузчик, и вот решение JS + CSS, но мне нужно что-то без SVG (чистый CSS3): https://www.jqueryscript.net/demo/Material-Design-Style-Loading-Spinner-with-jQuery-CSS3/

1 Ответ

0 голосов
/ 18 марта 2020

В случае, если кто-то ищет это, я нашел очень хорошее решение:

https://materializecss.com/preloader.html.

Это чистое CSS решение, нет SVG и JS не требуется.

...