Blog kalian loadingnya lama daripada menunggu hanya melihat halaman yang muncul satu persatu mending tambah dengan effect loading Pulse Loading.
Tutorku Blog juga sudah share Effect yang tidak kalah menarik Juggling Loader Animation . Ok berikut ini adalah tutor dan Tampilan loading Pulse Loading Animation.
Langkah-langkah Cara Membuat Effect Loading Di Blog
1. Buka Blogger kalian
2. Pilih Template> Edit HTML
3. Taruh Kode Berikut ini diatas kode </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/dimrem/cool/newbie/theril.js" type="text/javascript"></script>
<style>
#load-page-tutorku { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }
$circle-size:10vmin; * { box-sizing:border-box; position:relative; }
.loader { margin-top:250px; }
.circle { border-radius:100vmax; display:inline-block; height:20vmin; opacity:.5; width:20vmin; }
.pulse .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 -4vmin; transform:scale(0); }
.two .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 calc(0vw - 10vmin); position:absolute; transform:scale(0); }
.circle:nth-of-type(1) { background:#FF9800; }
.circle:nth-of-type(2) { background:#FFC107; animation-delay:100ms; }
.circle:nth-of-type(3) { background:#FFEB3B; animation-delay:200ms; }
.circle:nth-of-type(4) { background:#CDDC39; animation-delay:400ms; }
.circle:nth-of-type(5) { background:#8BC34A; animation-delay:500ms; }
.circle:nth-of-type(6) { background:#4CAF50; animation-delay:600ms; }
@keyframes pulse-1 {
25% { transform:scale(0); } 100% { transform:scale(1); }
}
</style>
<script src="https://cdn.rawgit.com/dimrem/cool/newbie/theril.js" type="text/javascript"></script>
<style>
#load-page-tutorku { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }
$circle-size:10vmin; * { box-sizing:border-box; position:relative; }
.loader { margin-top:250px; }
.circle { border-radius:100vmax; display:inline-block; height:20vmin; opacity:.5; width:20vmin; }
.pulse .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 -4vmin; transform:scale(0); }
.two .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 calc(0vw - 10vmin); position:absolute; transform:scale(0); }
.circle:nth-of-type(1) { background:#FF9800; }
.circle:nth-of-type(2) { background:#FFC107; animation-delay:100ms; }
.circle:nth-of-type(3) { background:#FFEB3B; animation-delay:200ms; }
.circle:nth-of-type(4) { background:#CDDC39; animation-delay:400ms; }
.circle:nth-of-type(5) { background:#8BC34A; animation-delay:500ms; }
.circle:nth-of-type(6) { background:#4CAF50; animation-delay:600ms; }
@keyframes pulse-1 {
25% { transform:scale(0); } 100% { transform:scale(1); }
}
</style>
Note: Jika kode yang diberi warna merah sudah ada di template kalian tidak perlu di tambahkan lagi
4. Letakan Kode berikut ini di bawah kode <body>
<div id="load-page-tutorku">
<div class="loader pulse">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="loader pulse">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
5. Save dan lihat hasilnya
Demikian Cara memberi Label pada post, Mudah bangetkan? Jangan lupa dishare juga ya supaya orang lain bisa tahu kali aja ada yang nyari hehe dan Next saya akan share Cara Membuat Effect Loading. Dan semoga Semoaga Bermanfaat bagi semuanya yang membaca.
Belum ada tanggapan untuk "Cara Membuat Effect Loading Di Blog (Pulse Loading Animation)"
Post a Comment