IOS 8 Loading Progress Bar In Blogger

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.


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.



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.