如何创建整页预加载器？答案

【问题标题】：How can I create a full page preloader?如何创建整页预加载器？
【发布时间】：2020-12-12 21:23:41
【问题描述】：

我正在尝试创建一个带有加载条和白色背景的预加载器，然后在 4 秒后以白色背景淡出。

预加载器应位于中心。现在它没有居中预加载器加上褪色效果不平滑。

这是我的 HTML：

const loaderWrapper = document.querySelector('.loaderWrapper');

const fadeEffect = setInterval(() => {
  if (!loaderWrapper.style.opacity) {
    loaderWrapper.style.opacity = 1;
  }
  if (loaderWrapper.style.opacity > 0) {
    loaderWrapper.style.opacity -= 0.1;
  } else {
    clearInterval(fadeEffect);
  }
}, 300);

html,
body {
  height: 100%;
}

body {
  background: rgb(199, 199, 199);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.loaderWrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000;
}

.loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 999;
}

.loader .bar {
  width: 10px;
  height: 5px;
  background: #000000;
  margin: 2px;
  animation: bar 1s infinite linear;
}

.loader .bar:nth-child(1) {
  animation-delay: 0s;
}

.loader .bar:nth-child(2) {
  animation-delay: 0.25s;
}

.loader .bar:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes bar {
  0% {
    transform: scaleY(1) scaleX(0.5);
  }
  50% {
    transform: scaleY(10) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(0.5);
  }
}

<div class="loaderWrapper">
  <div class="loader">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</div>

<div id="content">
  <h1>This is our page title</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

如何让加载栏图标居中，背景为白色，四秒后有平滑淡出效果？

这是 JSFiddle：https://jsfiddle.net/pqd0xfsk/1/

【问题讨论】：

查看我的答案，它不使用任何 javascript 并实现您真正想要的！

标签： javascript html css

【解决方案1】：

你并不真的需要这里的 Javascript。不用任何javascript就可以实现！

所以我从 javascript 代码中删除了 javascript，并在 .loaderWrapper 中添加了如下 CSS 动画，并添加了用于使元素居中的 CSS，如下所示：

@keyframes fadeLoader {
  to {
    opacity: 0;
  }
}

.loaderWrapper {
  .
  .
  .
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeLoader 0.6s 4s ease forwards;
}

垂直和水平居中元素的代码：

.loaderWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

动画代码：

.loaderWrapper {
  animation: fadeLoader 0.6s 4s ease forwards;
}

fadLoader：动画名称
0.6s: 动画时长
4s: 动画延迟
ease：动画功能
forwards: 只执行一次动画尝试运行：

html,
body {
  height: 100%;
}

body {
  background: #898989;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.loaderWrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeLoader 0.6s 4s ease forwards;
}

.loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 999;
}
.loader .bar {
  width: 10px;
  height: 5px;
  background: #000000;
  margin: 2px;
  animation: bar 1s infinite linear;
}
.loader .bar:nth-child(1) {
  animation-delay: 0s;
}
.loader .bar:nth-child(2) {
  animation-delay: 0.25s;
}
.loader .bar:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes bar {
  0% {
    transform: scaleY(1) scaleX(0.5);
  }
  50% {
    transform: scaleY(10) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(0.5);
  }
}

@keyframes fadeLoader {
  to {
    opacity: 0;
  }
}

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Iko Preloader</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="loaderWrapper">
        <div class="loader">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
          </div>
    </div>

      <div id="content">
        <h1>This is our page title</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>

      <script src="script.js"></script>
</body>
</html>

或者在 JS fiddle 中查看： https://jsfiddle.net/vxju64sc/2/

【讨论】：

这看起来不错。无论如何我可以在做褪色效果之前添加一个 2-3 秒的延迟吗？
动画中已经添加了4s延迟，如果你想增加或减少值可以这样做
试过了，但似乎延迟不起作用。 ` 动画：fadeLoader 0.6s 10s 缓进；`
添加了这一点，但它并没有在动画触发之前延迟动画。
我说的动画是渐变效果，会有4s的延迟，如果你用10s就会有10s的延迟。这里的延迟意味着经过延迟持续时间后会发生褪色动画，因此褪色效果将在 4s 或 10s 后发生（在您的情况下）

【解决方案2】：

只需更改以下 CSS，它就会解决您的问题。

.loaderWrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 1000;
}

.loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:center;
  z-index: 999;
  height:100%;
  width:100%;
}

【讨论】：

【解决方案3】：

我在这里对您的小提琴进行了一些编辑：https://jsfiddle.net/wxky2t4m/9/

主要部分是使用Web Animations API 实现平滑过渡 - 最重要的是在覆盖完成后隐藏（允许与主要内容交互）。
您也可以使用 CSS 过渡，但我不知道您是否在那里收到 finish 事件。

const loaderWrapper = document.querySelector('.loaderWrapper');

const fade = loaderWrapper.animate([
    { opacity: 1 },
    { opacity: 0 },
  ], {
    duration: 4000,
    easing: "ease-in"
  }
)

// Remove the element to allow clicking the main content.
fade.addEventListener("finish", () => loaderWrapper.style.display = "none")

但是 CSS 中有一些关于 flexbox 的小问题，它使你的条居中。

如果你愿意，你也可以使用 jQuery：https://api.jquery.com/fadeOut/

【讨论】：

这看起来不错，但我有一条评论。如何在开始褪色效果之前让它看起来满负荷显示 2 秒？
在animate(...) 选项中使用delay: 2000。看看这里的文档（名称与 CSS 中的相同）：developer.mozilla.org/en-US/docs/Web/API/Element/animate

【解决方案4】：

您可以在加载器和条形图上使用 CSS 动画，这将为您安排时间 - 如果您将其设为 5 秒持续时间，并且前 80% 时它什么都不做，然后它开始褪色。您还可以将条形设置为上下 5 次迭代，以便它们在消失后停止动画。

通过加载器中的 CSS 实现居中。

无需 setInterval/JS，因此更流畅。

html,
body {
  height: 100%;
}

body {
  background: rgb(199, 199, 199);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.loaderWrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000;
  animation: loader 5s 1 linear;
  animation-fill-mode: forwards;
}

.loader {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.loader .bar {
  width: 10px;
  height: 5px;
  background: #000000;
  margin: 2px;
  animation: bar 1s 5 linear;
}
.loader .bar:nth-child(1) {
  animation-delay: 0s;
}
.loader .bar:nth-child(2) {
  animation-delay: 0.25s;
}
.loader .bar:nth-child(3) {
  animation-delay: 0.5s;
}
@keyframes loader {
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes bar {
  0% {
    transform: scaleY(1) scaleX(0.5);
  }
  50% {
    transform: scaleY(10) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(0.5);
  }
}

<div class="loaderWrapper">
    <div class="loader">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
</div>

  <div id="content">
    <h1>This is our page title</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>

【讨论】：