Membuat Animasi Loading Pada Blogger - Setelah kemarin kita Membuat Efek Loading Warna Warni Pada Blog. Kali ini kita akan membuat animasi loading pada blogger.Animasi loading ini sangat keren, dikala ada pengunjung yang membuka blog Anda, animasi ini akan tampil memberi pesan pada pengunjung blog Anda. Jadi, pengunjung tidak bosan sambil menunggu loading blog Anda selesai.
Nah, kalau Anda tertarik ingin memasangnya pada blog Anda, mari kita simak caranya berikit ini.
Langkah pertama.
Simpan CSS dibawah ini diatas aba-aba
</style> pada template blog Anda. #page-loader{width:100%;height:100%;background:#2980b9;color:#2980b9;opacity:.99;position:fixed;top:0;left:0;z-index:9999;} .loading-wrapper{width:250px;position:fixed;top:40%;left:50%;margin-left:-125px;} .container,.loader,.tp-loader{position:relative;} .tp-loader{z-index:10000;} .tp-loader.spinner{width:30px;height:30px;margin:0 auto 10px;background-color:#fff;box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-animation:tp-rotateplane 1.2s infinite ease-in-out;animation:tp-rotateplane 1.2s infinite ease-in-out;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;} .loader-job,.loader-name{font-weight:200;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;text-align:center;} .loader-name{color:#fafafa;opacity:.9;font-size:32px;letter-spacing:-2px;padding-left:2px;padding-right:2px;margin-top:12px;transition:all .4s ease-in-out;} .loader-job{margin-bottom:40px;margin-top:5px;color:#d8d8d8;font-size:12px;transition:all .4s ease-in-out;} .loader-left{-webkit-transform:translateX(-40px);-moz-transform:translateX(-40px);-o-transform:translateX(-40px);transform:translateX(-40px);opacity:0;} .loader-right{-webkit-transform:translateX(40px);-moz-transform:translateX(40px);-o-transform:translateX(40px);transform:translateX(40px);opacity:0;} .loader-up{-webkit-transform:translateY(-80px);-moz-transform:translateY(-80px);-o-transform:translateY(-80px);transform:translateY(-80px);opacity:0!important;} .loader-down{-webkit-transform:translateY(80px);-moz-transform:translateY(80px);-o-transform:translateY(80px);transform:translateY(80px);opacity:0;} .loader-hide{opacity:0;} .loader{display:inline-block;text-align:center;margin:0 auto;width:30px;height:30px;border:4px solid #Fff;top:50%;animation:loader 2s infinite ease;} .loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#fff;animation:loader-inner 2s infinite ease-in;} .loader-animation{text-align:center;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out;} .footer-social-icons a,.social-icons a{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;color:#fff;} @keyframes loader{0%{transform:rotate(0);}25%,50%{transform:rotate(180deg);}100%,75%{transform:rotate(360deg);}} @keyframes loader-inner{0%,100%,25%{height:0%;}50%,75%{height:100%;}}Langkah kedua.
Simpan aba-aba dibawah ini sempurna dibawah aba-aba
<body> <div class='loader-container' id='page-loader'>
<div class='loading-wrapper'>
<div class='loader-animation' id='loader-animation'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
<div class='loader-name' id='loader-name'>
<strong>WELCOME</strong>
</div>
<strong><p class='loader-job' id='loader-job'>Mohon Tunggu Sebentar</p></strong>
</div>
</div> Anda juga dapat mengganti goresan pena yang Saya tandai sesuai impian Anda.
Langkah ketiga.
Simpan aba-aba JS dibawah ini sempurna diatas aba-aba
</body> <script src='https://rawgit.com/Txmvp/Animation/master/main.js' type='text/javascript'></script>Langkah keempat.
Simpan template. dan lihat hasilnya...
Share this Article