15.9.14
13
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:


loader
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..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 10 Pilihan Efek Loading Blog
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

13 komentar

  1. memang beda pilihan efek animasi loading ini.. baru liat model seperti ini,.Mba Dev..! x-)

    misalkan sya mau pakai efek LOAD 10..bagaimana,, Pisah2 lah Mba Dev. kode2nya.jd bingung..!..Mubazir efek cantik begini gak dipake..!
    Say Pesan yg load 10..! nda pake gula ya..!!.,

    BalasHapus
    Balasan
    1. hehe..kalau gak dipisah pasti gak ada yang bertanya seperti mas ini, efek load 10 akan saya kirim kodenya kemana mas, masalahnya kodenya belum saya ringkas dengan PHP, jadi lumayan banyak,

      send kemana neh kode efek 10 nya?

      Hapus
    2. imel sj mungkin mba..makasi y..moga2 dpt diterapkan..!
      aldino.sya@gmail.com...skali lg makasi ya Mba Dev..!

      Hapus

    3. HTML-markup disimpan di mana mba

      Hapus
    4. jika tampilannya hanya digunakan sebagai manipulasi efek pada postingan, tempatkan pada formulir postingan HTML, namun jika efek ini di kombinasikan dengan pengaturan halaman blog, maka disana harus kita sisipkan js untuk menjalankan animasi ini sebagai perintah untuk membuka halaman.

      Hapus
  2. cantik & menarik mbk efek loadingnya, ada yang lucu juga. hehe

    BalasHapus
  3. Keren.. rupanya bisa dibuat dengan css ya.. asli.. baru tau [-( :)

    BalasHapus
    Balasan
    1. biasanya dan kebanyakan dibuat dengan perintah JS, tetapi karena berpengaruh terhadap loading blog yang akan melambat, jadi kode JS-nya saya pecah menjadi CSS, dengan sentuhan keyframes agar objek target dapat bergerak seperti yang kita inginkan

      Hapus
  4. Loading pada blog memang terkadang dibutuhkan ya mbak, sebab dengan adanya loading itu, maka pengunjung akan tahu jika blog lagi sedang membuka :D

    BalasHapus
  5. mantaap tutorialnya...tapi saya masih bingung cara naronya di template saya...:(

    BalasHapus
  6. trima kasih mbak,.keren banget,Tapi masih bingung :-?

    BalasHapus
  7. sy pengen yg k3 3 mba devi..
    ne emailku kebunsejuk@gmail.com

    ok. sy nangis klu gk dikirm2.

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK