-----------------------------------------------------------------first code------------------------------------------------------------
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript'>

//<![CDATA[



$(document).ready(function(){



var getMax = function(){

return $(document).height() - $(window).height();

}



var getValue = function(){

return $(window).scrollTop();

}



if('max' in document.createElement('progress')){

// Browser supports progress element

var progressBar = $('progress');



// Set the Max attr for the first time

progressBar.attr({ max: getMax() });



$(document).on('scroll', function(){

// On scroll only Value attr needs to be calculated

progressBar.attr({ value: getValue() });

});



$(window).resize(function(){

// On resize, both Max/Value attr needs to be calculated

progressBar.attr({ max: getMax(), value: getValue() });

});

}

else {

var progressBar = $('.progress-bar'),

max = getMax(),

value, width;



var getWidth = function(){

// Calculate width in percentage

value = getValue();

width = (value/max) * 100;

width = width + '%';

return width;

}



var setWidth = function(){

progressBar.css({ width: getWidth() });

}



$(document).on('scroll', setWidth);

$(window).on('resize', function(){

// Need to reset the Max attr

max = getMax();

setWidth();

});

}

});

$(document).ready(function(){



$('#flat').addClass("active");

$('#progressBar').addClass('flat');



$('#flat').on('click', function(){

$('#progressBar').removeClass().addClass('flat');

$('a').removeClass();

$(this).addClass('active');

$(this).preventDefault();

});



});

//]]>

</script>


--------------------------------------------------------------second code--------------------------------------------------------------

<progress id='progressBar' value='0'>

<div class='progress-container'>

<span class='progress-bar'/>

</div>

</progress>


---------------------------------------------------------------final code--------------------------------------------------------------


/* reading position indicator */



progress {



/* Positioning */



position: fixed;



left: 0;



bottom: 0;



z-index: 101;



/* Dimensions */



width: 100%;



height: .25em;



/* Reset the apperance */



-webkit-appearance: none;



-moz-appearance: none;



appearance: none;



/* Get rid of the default border in Firefox/Opera. */



border: none;



/* For Firefox/IE10+ */



background-color: transparent;



/* For IE10+, color of the progress bar */



color: red;



}





progress::-webkit-progress-bar {



background-color: transparent;



}



.flat::-webkit-progress-value {



background-color: red;



}



.flat::-moz-progress-bar {



background-color: red;



}



.progress-container {



width: 100%;



background-color: transparent;



position: fixed;



top: 0;



left: 0;



height: .25em;



display: block;



}



.progress-bar {



background-color: red;



width: 50%;



display: block;



height: inherit;

}