我的预加载器没有按预期工作，动画不工作

Question

想要创建预加载器页面，并参考 URL“https://www.priyaty.com/”。但不知何故，我无法创建与上述 link.

相同的加载程序

我在应用少数 CSS 时遇到问题，但不知何故我与上面的 link 加载程序不匹配。

任何人都可以帮我构建相同的装载机吗？我正在使用 HTML、CSS 和 JavaScript

function counter() {
  var count = setInterval(function() {
    var c = document.getElementById("counter")
    int = parseInt(c.textContent);
    c.textContent = (++int).toString();
    if (int == 100) {
      clearInterval(count);
      c.classList.add("hide");
      document.getElementById("preloader").classList.add("slide-up")
    }
  }, 40)
}
counter();

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader .preloaderp {
  font-size: 5em;
  font-weight: bold;
  color: rgba(255, 255, 255, .05);
  position: absolute;
  padding: 15px;
  text-align: center;
  text-transform: uppercase;
}

.preloader.slide-up {
  height: 0px;
  transition: .5s;
  transition-delay: 1s;
  font-size: 0px;
}

.counter {
  font-size: 5em;
  color: #fff;
  font-weight: bold;
}

.counter.hide {
  opacity: 0;
  transition: 1s;
}

.counter::after {
  content: "%";
  font-size: .5em;
}

@media only screen and (max-width: 575px) {
  .preloaderp {
    font-size: 2em;
  }

  .counter {
    font-size: 2em;
  }
}

<div class="preloader" id="preloader">
    <p class="preloaderp">Loading</p>
    <div class="counter" id="counter">
        0
    </div>
</div>

Answer 1

你在找这个吗？

var counting = setInterval(function() {
  var loader = document.getElementById("loader");
  var currval = parseInt(loader.innerHTML);
  var Width = 100 - currval;
  var loadscreen = document.getElementById("loadscreen");
  loader.innerHTML = ++currval;
  if (currval === 100) {
    clearInterval(counting);
    loadscreen.style.display = "none";
  }
  loadscreen.style.transition = "0.1s";
  loadscreen.style.width = Width + "%";
}, 10);

.loading-screen {
  width: 100%;
  height: 100%;
}

.loader {
  font-size: 50px;
  font-family: Arial;
  position: fixed;
  left: 45%;
  z-index: 1000;
  color: red;
}

.loader:after {
  content: " %";
  font-size: 100%;
}

.after-load {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
  text-align: center;
  border: none;
}

<div class="loading-screen"></div>
<div class="after-load" id="loadscreen">
  <div class="loader" style="top: 50%;" id="loader">0</div>
</div>

我的预加载器没有按预期工作，动画不工作

My pre-loader is not working as expected, Animation not work

html

javascript

preloader

loader