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

Question

Want to create the pre-loader page, and have reference URL "https://www.priyaty.com/". But somehow I'm not able to create the same loader as the above link.

I'm facing an issue when I applied the few CSS but, somehow I'm not matched with the above link loader.

can anyone help me out to build the same loader? I'm using HTML, CSS, and 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

Were you looking for this?

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>