10 Pilihan Efek Loading Blog - Ini bukan pilihan tentang bagaimana cara mempercepat loading blog, karena Tips Membuat Proses Loading Blog Semakin Cepat sudah pernah saya bahas pada artikel sebelumnya. Hal ini terinspirasi saat saya mengunjungi sebuah blog yang sudah beberapa kali sering di buat menunggu halaman komentar terbuka, dan selama menunggu diberikan tampilan efek loading yang seperti Anda sudah pasti mengenal dan melihat efek seperti ini:
Baca juga - Penyebab Menurunnya Kualitas SEO Pada Blog
Semua Template yang digunakan untuk rangka blog, saya yakin pasti memiliki efek loading blog, hanya saja tampilan efek animasi yang berbeda-beda. 10 pilihan efek loading blog kali ini, bisa Anda jadikan referensi untuk memberikan hasil tampilan yang berbeda pada efek sebelumnya. Tenang saja, rangkaian kode ini tidak akan memberikan beban berat pada speed blog Anda, karena saya menyusun kode ini tanpa JavaScript. Hanya menggunakan efek CSS-animasi keyframes untuk memberikan objek gerakan dengan kode ini:
Sehingga Anda akan mendapatkan hasil efek loading yang berbeda pula dan terlihat lebih keren seperti tampilan di bawah ini:
DEMO SHOW
Pekerjaan Anda belum selesai sampai disana, Anda perlu membangun tema objek geraknya dengan pengaturan CSS seperti ini:
Selanjutnya, kita panggil elemen kelas CSS diatas dengan pengaturan HTML seperti ini:
SELESAI...
Bagaimana, apakah diantara 10 Pilihan Efek Loading Blog diatas sudah Anda temukan yang sesuai dengan tampilan blog Anda?. Jika sudah ketemu, saya menunggu respon sahabat semua pecinta SAHABAT BLOGGER 77 di kolom cerita dibawah.
Sampai ketemu..!!
Please wait...!!
Baca juga - Penyebab Menurunnya Kualitas SEO Pada Blog
Semua Template yang digunakan untuk rangka blog, saya yakin pasti memiliki efek loading blog, hanya saja tampilan efek animasi yang berbeda-beda. 10 pilihan efek loading blog kali ini, bisa Anda jadikan referensi untuk memberikan hasil tampilan yang berbeda pada efek sebelumnya. Tenang saja, rangkaian kode ini tidak akan memberikan beban berat pada speed blog Anda, karena saya menyusun kode ini tanpa JavaScript. Hanya menggunakan efek CSS-animasi keyframes untuk memberikan objek gerakan dengan kode ini:
@keyframes logopulse {
0% {
margin: 0 1px;
opacity: 1;
text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);}
100% {
margin: 0 8px;
opacity: 0.1;
text-shadow: 0 0 0 rgba(255, 255, 255, 0.3);}}
@keyframes dotleftpulse {
0% {
margin-left: 1px;
opacity: 1;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);}
100% {
margin-left: 8px;
opacity: 0.1;
box-shadow: 0 0 0 rgba(255, 255, 255, 0.3);}}
@keyframes dotrightpulse {
0% {
margin-right: 1px;
opacity: 1;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);}
100% {
margin-right: 8px;
opacity: 0.1;
box-shadow: 0 0 0 rgba(255, 255, 255, 0.3);}}Sehingga Anda akan mendapatkan hasil efek loading yang berbeda pula dan terlihat lebih keren seperti tampilan di bawah ini:
Pekerjaan Anda belum selesai sampai disana, Anda perlu membangun tema objek geraknya dengan pengaturan CSS seperti ini:
.section h3 {
height: 60px;
margin: 0;
line-height: 60px;
font-weight: 300;
text-align: center;
font-size: 20px;}
.loading-container {height: 60px;text-align: center;}
.loading-container:before {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: "";}
.loading {
display: inline-block;
text-align: center;
vertical-align: middle;
backface-visibility: hidden;}
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
font-family: 'icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: middle;
font-smoothing: antialiased;
osx-font-smoothing: grayscale;}
.icon-logo {
margin: 0 5px;
font-size: 18px;
color: #7FFF00;
animation: logopulse 500ms alternate infinite;}
.icon-logo.poop {font-size: 50px;}
.icon-logo:before {content: "NOW";}
.dot {
display: inline-block;
width: 10px;
height: 10px;
background: #fff;
vertical-align: middle;
border-radius: 100%;}
.dot.left.one {animation-delay: 150ms;}
.dot.left.two {animation-delay: 300ms;}
.dot.left.three {animation-delay: 450ms;}
.dot.left {
margin-left: 5px;
animation: dotleftpulse 500ms alternate infinite;}
.dot.right.one {animation-delay: 150ms;}
.dot.right.two {animation-delay: 300ms;}
.dot.right.three {animation-delay: 450ms;}
.dot.right {
margin-right: 5px;
animation: dotrightpulse 500ms alternate infinite;}Selanjutnya, kita panggil elemen kelas CSS diatas dengan pengaturan HTML seperti ini:
<div class="section bouncy">
<h3>Loading</h3>
<div class="loading-container">
<div class="loading">
<div class="dot left three"></div>
<div class="dot left two"></div>
<div class="dot left one"></div>
<i class="icon icon-logo"></i>
<div class="dot right one"></div>
<div class="dot right two"></div>
<div class="dot right three"></div>
</div>
</div>
</div>SELESAI...
Bagaimana, apakah diantara 10 Pilihan Efek Loading Blog diatas sudah Anda temukan yang sesuai dengan tampilan blog Anda?. Jika sudah ketemu, saya menunggu respon sahabat semua pecinta SAHABAT BLOGGER 77 di kolom cerita dibawah.
Demikian artikel tentang 10 Pilihan Efek Loading Blog ini dapat kami sampaikan, semoga artikel atau info tentang 10 Pilihan Efek Loading Blog ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
