How to Create Animation Effects Loading Page in Blog

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

How to Create Animation Effects Page Loading in Blog - animation effects on this blog is very simple, but the animation page loading in this blog is very cool. There are so many websites that provide ajax loading page for the blog, and I will also share an animation effect loading page, taken from one of the provider's web page ajax loading animations. 

To create page loading animation effects on the blog, we just use a CSS and jQuery in order to become an animation effect on the blog page loading. You do not need to worry about the use of animation effects on your blog page loading, because the effect is very light loading. Irvan Dev Blog will share a tutorial to make animated loading on the blog, the loading animation effect it will look so beautiful and cool when you or blog visitors browsing on your blog and then move through the page loading animation effects will be visible. Well just for those who want to create or add animation effects loading page in the latest blog please read the tutorial below:

Loading animation effects using a digital clock as background  

1. Login to your blogger panel admin

2. Click On Template » Edit HTML

3. Find this kbd Ctrl+F  ]]></b:skin> or </style>

4. Then add the following CSS script just above the kbd ]]></b:skin> or </style>

#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(http://i48.photobucket.com/albums/f237/acebangsam/ngopi-loader_zps9zmvbvgp.gif) no-repeat center 85%; z-index:+100000; cursor:default; display:none; } .wrapper-clockdate { padding:25px; max-width:600px; width:100%; text-align:center; -webkit-border-radius:3px; border-radius:3px; margin:0 auto; margin-top:15%; -webkit-box-shadow:inset 0px 0px 10px #222; box-shadow:inset 0px 0px 10px #222; -webkit-border-radius:5px; border-radius:5px; background-color:#2f2f2f; } #clock-large { font-family:Orbitron, sans-serif; font-size:60px; text-shadow:0px 0px 1px #fff; color:#fff; } #clock-large span { color:#888; text-shadow:0px 0px 1px #333;font-size:30px;position:relative;top:-27px;left:-10px; } #date-large { letter-spacing:15px; font-size:14px; font-family:arial,sans-serif; color:#fff; }

5. Add script HTML/Javascript below right above the code </body>

<script type='text/javascript'>
// Javascript Animation Loading Page IrvanDev Blog
//<![CDATA[
$(document.body).append('<div id="clockdate-full"><div class="wrapper-clockdate"><div id="clock-large"/><div id="date-large"/></div></div>');
$(window).on("beforeunload", function() {
    $('#clockdate-full').fadeIn(500).delay(8000).fadeOut(1000);
});
// Digital Clock
function showTime(){var a_p="";var today=new Date();var curr_hour=today.getHours();var curr_minute=today.getMinutes();var curr_second=today.getSeconds();if(curr_hour<12){a_p="<span>AM</span>"}else{a_p="<span>PM</span>"}if(curr_hour==0){curr_hour=12}if(curr_hour>12){curr_hour=curr_hour-12}curr_hour=checkTime(curr_hour);curr_minute=checkTime(curr_minute);curr_second=checkTime(curr_second);document.getElementById("clock-large").innerHTML=curr_hour+" : "+curr_minute+" : "+curr_second+" "+a_p}function checkTime(i){if(i<10){i="0"+i}return i}setInterval(showTime,500);
// Date and Month
var months=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];var myDays=["Minggu","Senin","Selasa","Rabu","Kamis","Jum&#39;at","Sabtu"];var date=new Date();var day=date.getDate();var month=date.getMonth();var thisDay=date.getDay(),thisDay=myDays[thisDay];var yy=date.getYear();var year=(yy<1000)?yy+1900:yy;document.getElementById("date-large").innerHTML="<b>"+thisDay+"</b>, "+day+" "+months[month]+" "+year;
//]]>
</script>

Click save and see the results, good luck.

Animation Effects Loading Page images:acebangsam.us

Demo

Go to Link