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 pletely 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=".6.0.min.js"></script>

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 pletely 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./jquery-3.6.0.min.js"></script>

• javascript
• html
• jquery
• progress-bar
• loading

• You can use dev-tools network tab to throttle the internet speed – IT goldman Commented Jul 28, 2022 at 5:54
• 1 Yeah I know but I want to show my website logo till the page load. Under that logo one progress bar which indicate the loading percentage. – Anupam Mistry Commented Jul 28, 2022 at 8:43

1 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./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>