Make a dynamic page loading bar with percentage using html, css, jquery

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

/**
 * preloader style
 */
.preloader-wrap {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 9999;
}

.percentage {
    height: auto;
    width: auto;
    border: none;
    text-align: center;
    position: relative;
    top: 48%;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    color: #000;
    font-size: 50px;
    font-weight: 600;
    font-family: montserrat;
}
.trackbar {
    width: 100%;
    height: 3px;
    color: #fff;
    text-align: center;
}
.loader {
    height: 3px;
    width: 100%;
    position: relative;
    top: 50%;
    left: 0;
}
.loadbar {
    width: 0%;
    height: 3px;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    /*animation: flicker 5s infinite;*/
    overflow: hidden;
}
.glow {
    display:none;
}
@media (max-width:576px){
.percentage {
    font-size: 35px;
}
.loadbar {
    height: 2px;
}
}

jQuery(document).ready(function($){
    
    /* preloader */
    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
    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);
    }

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