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.
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 = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#mbsload').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='_blank'
$('#mbsload').click(function() {
$(this).hide();
});
});
</script>
nice share,,
ReplyDeletethank guys!
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