The NProgress jQuery plugin makes it really easy to achieve this effect. It looks similar to the YouTube progress bar, and also shows a circular loading animation at the next end of the bar. Creator Ricosta Cruz has called it the Nanoscopic Progress bar.

Assuming your site uses jQuery (1.8+), download the latest version of nProgress and follow the below give directions to have it working:

Add the files nprogress.js and nprogress.css to your website or project folder.
Copy-paste the below code to initiate the required NProgress functions:
<script>
NProgress.start();
NProgress.done();
</script>
Save the changes.
That’s it! Revisit your site or project pages to see the effect live.

yani diyorki nprogress.js ve nprogress.css siteye atın sonra bunlara çağırın

ve head tagları arasına

<script>
NProgress.start();
NProgress.done();
</script>
devreye koy

http://w3bits.com/youtube-progress-bar-effect/