如何添加进度条的预加载器和根据页面加载速度增加的百分比？

Question

条件：进度条和百分比数字根据页面加载速度增加速度，即当整个网页加载完毕时进度条已满，数字100%逐渐增加！

$(window).on('load', function() {
  $('#preloader').css({
    "transform": "translateY(-100%)",
    "transition-delay": "0.6s"
  });
  $('.loader').css({
    "opacity": "0",
    "transform": "translate(-50%,-100%)",
    "transition-delay": "0.3s"
  });
});

#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  background: #F6F6F6;
  z-index: 9999;
  transition: all 0.4s ease;
}

.loader {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  transition: 0.4s;
}

.loader .loader_text {
  font-size: 50px;
  font-weight: 600;
  font-family: sans-serif;
  color: #26001B;
  margin: 20px auto;
  text-align: center;
}

.loader .loader_bar  {
  position: relative;
  width: 500px;
  height: 12px;
  background: #EDEEF7;
  border-radius: 50px;
}

.loader .loader_bar:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #0075F6;
  border-radius: 50px;
  animation: fill 2s ease;
}

@keyframes fill {
  0% { width: 0% }
  100% { width: 100% }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
  <div class="loader">
    <p class="loader_text" id="loader_text">0%</p>
    <div class="loader_bar" id="loader_bar"></div>
  </div>
</div>

我在根据页面加载速度增加速度时遇到问题，这里观察到速度与 css 关键帧中给出的一样 - 恒定速度，即动画：填充 2s 轻松；表示 2 秒的速度。 我希望在页面加载时自动加速！

提前感谢您的帮助！

Answer 1

基于您的代码，但从 tuto 添加了此代码

我修改了p元素，将数字和百分比分开。

我将这一行 animation: fill 2s ease; 更正为 animation: fill 0.3s ease;，因为持续时间与加载相同，否则加载条永远不会达到 100%。

并在下面添加jQuer：

$('.loader_text_unit').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');

  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {

    duration: 300,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
    }
  });
});

演示：

$(window).on('load', function() {
  $('#preloader').css({
    "transform": "translateY(-100%)",
    "transition-delay": "0.6s"
  });
  $('.loader').css({
    "opacity": "0",
    "transform": "translate(-50%,-100%)",
    "transition-delay": "0.3s"
  });

  $('.loader_text_unit').each(function() {
    var $this = $(this),
        countTo = $this.attr('data-count');

    $({ countNum: $this.text()}).animate({
      countNum: countTo
    },

    {

      duration: 300,
      easing:'linear',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
      }
    });
  });

});

#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  background: #F6F6F6;
  z-index: 9999;
  transition: all 0.4s ease;
}

.loader {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  transition: 0.4s;
}

.loader .loader_text {
  font-size: 50px;
  font-weight: 600;
  font-family: sans-serif;
  color: #26001B;
  margin: 20px auto;
  text-align: center;
}

.loader .loader_bar  {
  position: relative;
  width: 500px;
  height: 12px;
  background: #EDEEF7;
  border-radius: 50px;
}

.loader .loader_bar:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #0075F6;
  border-radius: 50px;
  animation: fill 0.3s ease;
}

@keyframes fill {
  0% { width: 0% }
  100% { width: 100% }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
  <div class="loader">
    <p class="loader_text" id="loader_text"><span class="loader_text_unit" data-count="100">0</span><span>%</span></p>
    <div class="loader_bar" id="loader_bar"></div>
  </div>
</div>