10 Pilihan Efek Loading Blog

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:

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:





DEMO SHOW




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.

Sampai ketemu..!!