jQuery snippet for making a progressbar for reading position in browser.

progressbar.css

#progresswrapper {
	position: fixed;
	top: 0px;
	height: 2px;
	width: 100%;
	z-index: 1000; 
}
#progressbar {
	top: 0;
	position: fixed;
	height: 2px;
	width: 100%;
	background: none;
 
}
progress:not([value]) {
	display: none;
}
 
progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
	color: #ff0000;
	background-color: #34a5c8;
	border: 0; 
}
 
progress::-webkit-progress-bar { background: none; }
progress::-webkit-progress-value { background-color: #34a5c8; }

progressbar.js

$('body').prepend('<div id="progresswrapper"><progress id="progressbar" value="0" max="100" ></progress></div>'); // Makes a CSS styleable div for the progressbar
$(window).scroll(function () { 
  var 	scvp = $(window).scrollTop(), // pixels on top hidden from view
 		dh = $(document).height(), // height of document window
 		dp = $(window).height(); // height of broswer window
 		scrollPercent = (scvp / (dh-dp)) * 100; 
 	var position = scrollPercent;
 	$("#progressbar").attr('value', position);
	});

what is i want to get for a scroller only for the particular width

Works very well on Desktop but not very well on Opera Mini / Safari iPhone :S