How to add a preloader of progress bar and percentage increasing accordingly to the speed of page loaded?

user_15413382 0
Viewed 3287

Condition: Progress bar and percentage number increasing speed according to page loading speed, i.e, when the full web page is loaded the bar is full and number is 100% increasing gradually!

$(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>

I have problem in the increasing speed according to page load speed, here it is observed that the speed is as given in css keyframes - constant speed, i.e, animation: fill 2s ease; means 2 sec speed. Which I want auto accelration as page load!

Thanks in advance for help!

css html jquery javascript
1 Answers

Based on your code but added this code from this tuto

I modified a bit the p element by separating the number and percentage.

I corrected this line animation: fill 2s ease; for animation: fill 0.3s ease; because duration as to be the same as loading otherwise loading bar never reach 100%.

and add the jQuer below:

$('.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);
    }
  });
});

DEMO:

$(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>

user_110445420
Related