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.
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:
- Login back to your blogger account Select your blog < Template < Edit HTML
- Save a backup of your blog template code first, now click inside the template code box.
- Now Find the <head> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
- 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
- Step Click on -> Template -> Edit HTML->
- Step Now Find the ]]></b:skin> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
- Step Copy and Paste the below code above ]]></b:skin>
- Step Locate <body> By Pressing Ctrl+F (Windows) or CMD+F (Mac) and copy the
below JavaScript and paste it above/before </body> - Step 5 You're done. Now Save template and see result by refreshing page.
/* 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); }}
<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>
Style 2: Blue Ball
- Step Log in to your Blogger Account and Go to your Blogger Dashboard
- Step Click on -> Template -> Edit HTML->
- Step Now Find the ]]></b:skin> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
- Step Copy and Paste the below code above ]]></b:skin>
- Step Locate <body> By Pressing Ctrl+F (Windows) or CMD+F (Mac) and copy
the below JavaScript and paste it above/before </body> - Step 5 You're done. Now Save template and see result by refreshing page.
/* 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); }
}
<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>
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.
Post a Comment