Add YouTube Style Progress Loading Bar in Blogger

Well earlier we posted how you can add an awesome fading Ajax loading effect in your blogger blog that simply makes your reader to enjoy the loading time he has to face, well now I found another awesome tutorial if you are familiar with YouTube and you browse it daily you might have seen a red kind of progress loader its using that occurs when the page is loading and then vanishes away.

Well I was searching for the same loader as I liked it very much, so then I came across a website called Tutorialzine who posted this tutorial on his website but it was little bit typical, so I fixed few things just to make it compatible with Blogger blog and now the stuff works great, so I tested it on my website and maybe I am still using it if you came early I guess. So you could see the above loading bar.

So now if you think looks awesome lets thank the creator and modifier and lest start adding this to your Blogger or Wordpress Blog. Well now frankly speaking I have not tested this widget on Wordpress blog, but I have tested this on Blogger and it works fine. So possibly it will work great on Wordpress websites too :)

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for </body> tag & paste below code above it.

   <style>#nprogress{pointer-events:none}#nprogress .bar{background:#29d;height:2px;left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress .peg{-ms-transform:rotate(3deg) translate(0px,-4px);-webkit-transform:rotate(3deg) translate(0px,-4px);box-shadow:0 0 10px #29d, 0 0 5px #29d;display:block;height:100%;opacity:1.0;position:absolute;right:0;transform:rotate(3deg) translate(0px,-4px);width:100px}#nprogress .spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}#nprogress .spinner-icon{-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite;border:solid 2px transparent;border-left-color:#29d;border-radius:50%;border-top-color:#29d;box-sizing:border-box;height:18px;width:18px}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.photo{display:none}</style><div id='loadMore'/><script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><script src='http://goo.gl/10Okof'/>

3. Now hit Save Template & you are done, now just refresh your blog and see this awesome loading effect.

Well if you loved this effect and trick then do share this with all your friends by liking it below, if you face any problem do comment :)