Halloo halooo. .
Wah gimana nih tampilan baru blog ini ? bagus ga ._.
jelek juga gpp , maklum masih newbie :3
Nah iya , kali ini admin mau post tentang Cara Membuat Animasi Loading Blog Dengan CSS
Tutorial ini aku dapet dari Om-Dayz , Jadi ya udah langsung aja di pasang di blog ini sekalian share juga tutorial nya XD
Nah untuk contoh nya bisa liat dibawah ini . .
Gimana ? bagus kan ._. , Untuk demo nya bisa liat di blog ini , ( cara liat nya gimana ? ) coba kamu klik link yang ada di menu blog ini , nanti keluar animasi loading nya :3
Nah kalo mau di pasang langsung aja berikut tutorial nya
CSS :
CSS dibawah ini di pasang tepat di atas ]]></b:skin>
#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(240 ,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(240 ,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(240 ,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(240 ,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); }}
Script Animasi :
Pasang Script Animasi dibawah ini tepat di atas code </body>
<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</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() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>
Jquery :
Pasang JQuery ini di atas code </head> ( Pasang kalo belom ada JQuery di template kamu )
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Keterangan :
Pada code CSS , Kamu ganti code yang berwarna merah dengan code warna mu sendiri.
Tapi kalo ga di ganti juga gpp , cuman hasil nya ntar warna merah persis kaya contoh nya.
Nah , gimana susah ga cara pasang nya ? ngga lah ya XD
Kalo ada ada blom paham langsung aja komentar / contact aku ._.
Semoga bermanfaat dan selamat mengoprek" XD
