BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

iOS 7 Loading Progress Bar for Blogger


Hi guys, its been a long time I haven't been here, but I'm back now for almost all time with new themes, widgets and stuff for blogger and as you know "I don't always do anything but when I do, Its always AWESOME!" well today we are looking for something new on blogger, mostly this thing you will find in WP blogs, so I've designed this awesome page loader in iOS7 Bar Style for blogger. It looks like iOS7 type bar totally, you can check live demo for it. As you know we keep everything simple here so I'll be providing very simple, easy and one time coding here today.
First of all you can check live demo for this AWESOME iOS7 Page Loader for Blogger. (Just hit any blog post or any external link) you will see that there's loading effect in iOS7 bar style when you hit the link.
iOS7 Loading bar for blogger

liked live demo? now lets see the one time easy installation of this iOS7 Loading Bar for your blog.
Just follow these easy steps :
1. First of all go to Blogger > Template > Edit Template
2. Now find the code </body> (by CTRL + F)
3. After finding the above code, just paste the following code just above it.
#page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#fff url('') no-repeat 50% 30%;
        color: #000;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
<script type='text/javascript'>
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`

4. Done, Hit Save! Go on, check your blog now.
I hope you would have liked this awesome loading bar, I'm posting whole set of new blogger page loaders in next posts so just stay subscribed if you don't want to miss the fun!
Stay connected and keep surfing on bloggerhero! post your thoughts, queries here in comment box!


  1. The above article is nice and interesting, thank you willing to share! Greetings success of admin wish you deign to visit my website, thank you :)

    1. Thanks Rida! Stay Connected.
      We design only blogger themes.

  2. Thanks you
    Really made my website design impressive; please keep sharing such things

  3. Hm, have tried it ( but it doesn't work at all. Perhaps I use the wrong ajax library script src='

  4. thanks for sharing, I am currently looking for a way, :) please do not forget to visit my blog at

  5. I read your full content really very nice and clearly understand all given information,thanks for sharing that worth information.
    Such as very good information.
    Oracle SQL Training in Chennai


Powered by Blogger.