Show loading progress bar till the page load

Question

I want to show loading progress bar till the page load. If the internet might be slow and page take more to load, the progress bar show till the page fully load.

I attempted to add code, but because internet speeds vary, it is inaccurate. Could you please help me with this? I want to add a progress bar that starts at 0% while the page is loading and goes up to 100% after the page is completely loaded, dependent on the page loading speed.

$(window).on('load', function() {
  $('#preloader').fadeOut(500);
  $('body').removeClass('pre_loader');

});
var width = 100,
  perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
  EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
  time = parseInt((EstimatedTime / 1000) % 60) * 100;

// Loadbar Animation
$(".loadbar").animate({
  width: width + "%"
}, time);

// Percentage Increment Animation

function animateValue(id, start, end, duration) {
  var range = end - start,
    current = start,
    increment = end > start ? 1 : -1,
    stepTime = Math.abs(Math.floor(duration / range)),
    obj = $(id);

  var timer = setInterval(function() {
    current += increment;
    $(obj).text(current + "%");
    //obj.innerHTML = current;
    if (current == end) {
      clearInterval(timer);
    }
  }, stepTime);
}

// Fading Out Loadbar on Finised
setTimeout(function() {
  $('.preloader-wrap').fadeOut(100);
}, time);

<div class="preloader-wrap">
  <div class="loader">
    <div class="trackbar">
      <div class="loadbar">
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Answer 1

Sound like CSS (only) animation would be an option to consider. Inline your progress bar and it's <style> first thing as the page loads. Then remove then and make the body visible again on page load event. You can cheat time if you use some easing function that will never finish.

If you need numbers in your progress bar, then there is an options for that; even by a variable in modern browsers https://css-tricks.com/animating-number-counters/

For example (need to play with the percent values a bit):

<!-- almost first thing on page -->
<style>
  .container {
    width: 400px;
    height: 50px;
    position: relative;
    border: 1px solid black;
  }
  
  .progress {
    background: blue;
    float: left;
    color: white;
    width: 100%;
    height: 50px;
    line-height: 50px;
    animation-name: slideInFromLeft;
    animation-duration: 30s;
    animation-timing-function: cubic-bezier(0, .9, .9, .999);
    text-align: center;
  }
  
  .percent::before {
    content: counter(count);
    animation-name: counter;
    animation-duration: 30s;
    animation-timing-function: cubic-bezier(0, .9, .9, .999);
    counter-reset: count 0;
  }
  
  @keyframes slideInFromLeft {
    0% {
      width: 0%;
    }
    99% {
      width: 99%;
    }
  }
  
  @keyframes counter {
    0% {
      counter-increment: count 0;
    }
    10% {
      counter-increment: count 50;
    }
    20% {
      counter-increment: count 60;
    }
    30% {
      counter-increment: count 70;
    }
    40% {
      counter-increment: count 80;
    }
    50% {
      counter-increment: count 90;
    }
    60% {
      counter-increment: count 95;
    }
    70% {
      counter-increment: count 98;
    }
    80% {
      counter-increment: count 99;
    }
    90% {
      counter-increment: count 90;
    }
    100% {
      counter-increment: count 100;
    }
  }
</style>
<div class="container">
  <div class="progress">
    <span class="percent">%</span>
  </div>
</div>