iOS 7 Loading Progress Bar For Blogger Blogs

You may have noticed some kind of iOS Page loading progress bar on some WordPress site which is really good.In terms for adding such special effect on Blogger, It only just matter of adding a few piece of HTML code inside the blogger template.

In WordPress you can change the page loading progress bar with the help of many free plugins available and other theme options.But for blogger we don’t have any short hand method and each and every customization we do is by with the help of some modified HTML Code.

Check : How to generate Privacy Policy page for your Blog

Which one do you like the old blank page loading or the new iOS Special effect page loading progress bar. iOS 7 Page loading progress bar is a damn eye catching progress bar, which users are expecting for.

We can add this  iOS 7 Page loading progress bar to our blogger blog by adding a few piece of HTML scripts to our root blogger template.

Live Preview :::

Preview of iOS7 Loading progress bar

Let’s Start

1. Go to Blogger Dashboard > Template

2.Click on Edit HTML

3. Now click anywhere inside the template editor and press CTRL+F  to launch search bar

4. Now type </head> and hit enter

After finding the above code

5. Just above the </head> tag paste the below given HTML tags

<style>
#page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#fff url('http://www.ipeeworld.com/wp-content/uploads/2015/12/iOS7Loader.gif') no-repeat 50% 30%;
color: #000;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#page-loader').fadeIn(000).delay(6000).fadeOut(000);
});
//]]>
</script>

Now save the template and see the change

This is one of the best page loader graphics available for blogger.It is some exactly like the new iOS7 progress loader.

Now visitors will not get angry by  the old blank page loading.

You can add this to any blogger template, You can also add this to the recently shared 10 Premium like free tech and gadget blogger templates of 2016 too

About Astro Joseph

Hi, I'm Astro Joseph the founder and CEO of IPEE World and IPEE Network.I started this blog for a passion and it is now empowering millions of readers around the globe.Read more about me at About and Contact page.

Leave a Reply

Your email address will not be published. Required fields are marked *