Learn

Progress Bar with jQuery, HTML, CSS3 by using Navigation Timing API which provides data that can be used to measure the performance of a website. This API can provide end-to-end latency data that can be more useful and accurate.The Performance Timing interface represents timing-related performance information for the given page.

Example:

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

There are many measured events given in milliseconds that can be accessed through the Performance Timing interface.

Above content has taken from MDN (Mozilla Development Network)

Here you can see some techniques to make it possible.

Calculate estimated time of page load by using Navigation Timing

API

var width = 100, // width of a progress bar in percentage
perfData = window.performance.timing, // The PerformanceTiming interface
EstimatedTime = -(perfData.loadEventEnd – perfData.navigationStart), // Calculated Estimated Time of Page Load which returns negative value.
time = parseInt((EstimatedTime/1000)%60)*100; //Converting EstimatedTime from miliseconds to seconds.

By using jQuery I have added animation of a progress bar by filling progress bar with stripes background.

jQuery:

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

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

CSS

.loadbar {
  width: 0%;
  height: 100%;
  background: repeating-linear-gradient(
  45deg, 
    #008737, 
    #008737 10px, 
    #69AF23 10px,
    #69AF23 20px
  ); /* Stripes Background Gradient */
  box-shadow: 0px 0px 14px 1px #008737; 
  position: absolute;
  top: 0;
  left: 0;
  animation: flicker 5s infinite;
  overflow: hidden;
}

.glow {
  width: 0%;
  height: 0%;
  border-radius: 20px;
  box-shadow: 0px 0px 60px 10px #008737;
  position: absolute;
  bottom: -5px;
  animation: animation 5s infinite;
}

Then I have added progress counter animation from 0 – 100 %

// Percentage Increment Animation
var PercentageID = $("#precent"),
        start = 0,
        end = 100,
        durataion = time;
        animateValue(PercentageID, start, end, durataion);

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);
}

That’s All! Here you can see a working demo:

from WordPress https://ift.tt/2RQqcjf
via IFTTT