Awesome Css Animation Loading Screen Ball For Blogger.

A website is a combination of various graphics, slider, CSS,JavaScript, HTML, Jquery files etc. But in most of the site we see they don't see any loading animation or percentage of loading time. In case of some heavily graphics especially photography website while loading a page it takes longer time. looking little frustrating. Because after visiting few pages visitors will go away due to delay loading time For this reason your site page view will reduce. This thing got me thinking.

Awesome Css Animation Loading Screen Ball For Blogger.

Why don't we use a page loading animation which will give our readers a break with beautiful animation? What do you think about displaying a page loading gif image while the page loads gracefully in site's page background?
Today i will Share two awesome  Css Loading Screen Ball.

Follow Steps:

  1. Login back to your blogger account Select your blog < Template < Edit HTML
  2. Save a backup of your blog template code first, now click inside the template code box.
  3. Now Find the <head> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
  4. Step  Copy and Paste the below code above </head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>


If this script above previously has been installed on your blogger template then skip this step

Style 1: Red Ball

  1. Step  Click on -> Template -> Edit HTML->
  2. Step  Now Find the ]]></b:skin> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
  3. Step  Copy and Paste the below code above ]]></b:skin>

  4. 
    /* CSS loading ball by prio-soft */
     #loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
    .loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
    .loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
    @-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
    @-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
    @-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
    @-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}
    

  5. Step Locate <body> By Pressing Ctrl+F (Windows) or CMD+F (Mac) and copy the
    below JavaScript and paste it above/before </body>

  6.  
     <div id='loadhalaman'>
    <div class='loadball'></div>
    </div>
    <script type='text/javascript'>
    $undefinedfunctionundefined) {
    var siteURL = "http://" + top.location.host.toStringundefined);
    var $internalLinks = $undefined"a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
    $internalLinks.clickundefinedfunctionundefined) {
    $undefined'#loadhalaman').fadeInundefined1500).delayundefined6000).fadeOutundefined1000);
    });
    
    // Remove overlay when clicked to overcome interference, especially if the internal link is set to target='_blank'
    $undefined'#loadhalaman').clickundefinedfunctionundefined) {
    $undefinedthis).hideundefined);
    });
    });
    </script>
    
  7. Step 5 You're done. Now Save template and see result by refreshing page.


Style 2: Blue Ball


  1. Step  Log in to your Blogger Account and Go to your Blogger Dashboard
  2. Step  Click on -> Template -> Edit HTML->
  3. Step  Now Find the ]]></b:skin> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
  4. Step  Copy and Paste the below code above ]]></b:skin>

  5. 
    /* CSS loading ball by prio-soft */
      .ball {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-top:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #2187e7;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:spin .5s infinite linear;
    -webkit-animation:spin .5s infinite linear;
    }
    .ball1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-top:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #2187e7;
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-50px;
    -moz-animation:spinoff .5s infinite linear;
    -webkit-animation:spinoff .5s infinite linear;
    }
    @-moz-keyframes spin {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg); }
    }
    @-moz-keyframes spinoff {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(-360deg); }
    }
    @-webkit-keyframes spin {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
    }
    @-webkit-keyframes spinoff {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(-360deg); }
    }
    

  6. Step Locate <body> By Pressing Ctrl+F (Windows) or CMD+F (Mac) and copy
    the below JavaScript and paste it above/before </body>

  7.  
     <div id='loadhalaman'>
    <div class='loadball'></div>
    <div class='loadball1'></div>
    </div>
    <script type='text/javascript'>
    $undefinedfunctionundefined) {
    var siteURL = "http://" + top.location.host.toStringundefined);
    var $internalLinks = $undefined"a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
    $internalLinks.clickundefinedfunctionundefined) {
    $undefined'#loadhalaman').fadeInundefined1500).delayundefined6000).fadeOutundefined1000);
    });
    
    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $undefined'#loadhalaman').clickundefinedfunctionundefined) {
    $undefinedthis).hideundefined);
    });
    });
    </script>
    

  8. Step 5 You're done. Now Save template and see result by refreshing page.


Hope you understand that, how to add Awesome Css Loading Screen Ball blogger widgets
on blog or blogger site. If you have any problem, then feel free to communicate by comment box. If you like this widget, then don't forget to share this post with your social media.
Any type of information please Contact us.
Labels: ,

Post a Comment

[blogger][facebook][disqus]
Swicther!
Layout
Boxed Full
Boxed Background Image
Main Color
#007ABE

Shawon Khan

{picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOjkSsWvmjIpQ_ICXr5bGfT4RPhd5Vrxek-oaojrkvS3JiGv9vw6CubrWWVDfcVeVheD61_MlnQHrsEfAVH3JVIc_0zb-RwuasrPCJQBYPOaDaZ7LVdKorVE2kIhrh8sl-9a_s-R7ReQzX/s50/avatku.jpg} Nor is it at all prudent for the hunter to be over curious touching the precise nature of the whale spout. {facebook#http://facebook.com} {twitter#http://twitter.com} {google#http://google.com} {pinterest#http://pinterest.com} {youtube#http://youtube.com}

Contact Form

Name

Email *

Message *

Powered by Blogger.