8 Aug 2015

Creating css3 Loading Animation For Blog 2015

Hii Folks,Today after a long time,i have comed back with an awesome trick.Creating css3 Loading Animation  For Blog.
Animation loading blog can give the effect of manipulation on loading blog to appear more quickly.You can modify the script again to your liking.


For Live demo-fakename


Let's start.


Add CODE This Blog Loading CSS animations above ]]> </ b: skin>


#mbsload {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;}
.mbsloadball {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;}
.mbsloadball-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); }}}

Then add the JQuery above </ head> , here I use Jquery version 1.7.2 ( Insert if not exist JQuery in your Template ).

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

The last step, attach the following script tag above the </body>


<div id='mbsload'>
<div class='mbsloadball'/>
<div class='mbsloadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = &quot;http://&quot; + top.location.host.toString();
var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;]&quot;);
$internalLinks.click(function() {
$(&#39;#mbsload&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
});
// Remove the overlay when clicked to overcome interference, especially if the internal link is set up with a target=&#39;_blank&#39;
$(&#39;#mbsload&#39;).click(function() {
$(this).hide();
});
});
</script>




Now You are done.just save the template.


2 comments:

  1. Great Post ! CSS3 tutorial with simple and easy examples,covering CSS3 Modules, Background Properties, Borders, Gradients, Shadow Effects, Web Fonts,Text,2D & 3D Transform, Transitions, Animations, Multiple Columns, User Interface, Box Sizing. HTML5 Tutorial & CSS3 Tutorial.

    ReplyDelete

Ads Inside Post