Cara Mudah Membuat Efek Loading Animasi Pada Blogspot

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Cara Mudah Membuat Efek Loading Animasi Pada Blogspot, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang android, Blogger, CSS, HTML, Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Banyak orang di luar sana yang memberikan cara membuat efek loading animasi di blogger, namun tidak semuanya yang fast loading atau loadingnya cepat. Disini saya akan sharing tutorial mudah cra menghias blog dengan animasi pada blogspot.

Loading yang saya berikan ini milik salah satu blog yakni Panji.id dan sudah di share oleh Kangian. Tutorial ini saya ambil untuk membagikan tutorial yang menurut saya bermanfaat.

Efek loading ini juga berguna ketika blog Anda belum termuat seutuhnya dan tidak terlihat acak-acakan ketika sudah memuat seutuhnya tampilan dari blog Anda. Efek inipun hanya menggunakan CSS dan HTML jadi tidak memberatkan loading halaman Anda.

Cara Membuat Efek Loading Animasi Pada Blogspot

Silakan masukkan kode CSS dibawah ini kedalam template HTML 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%;}}

Selanjutnya silakan taruh kode HTML dibawah ini tepat dibawah kode <body> atau <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></div>

Silakan Anda tambahkan script di bawah ini di atas </body>


<script src='https://rawgit.com/Txmvp/Animation/master/main.js' type='text/javascript'></script>

Selamat mencoba ^_^.

blog kita

Cara Mudah Membuat Efek Loading Animasi Pada Blogspot

Cara Membuat Efek Loading Animasi Pada Blogspot

Post a Comment for "Cara Mudah Membuat Efek Loading Animasi Pada Blogspot"

Menu Halaman Statis