Mecha versi 2.6.3 sudah dirilis!

CSS3 Loading Bar

Tabel Konten
  1. HTML 
  2. CSS 
  3. Demo 
CSS3 Loading Bar

HTML 

<div class='loading'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS 

.loading {text-align:center;}

.loading span {
  display:inline-block;
  margin:0px 1px;
  width:20px;
  height:20px;
  background-color:cyan;
}

.loading span:nth-child(1) {
  -webkit-animation:loading 0.5s infinite alternate 0s;
  -moz-animation:loading 0.5s infinite alternate 0s;
  -ms-animation:loading 0.5s infinite alternate 0s;
  -o-animation:loading 0.5s infinite alternate 0s;
  animation:loading 0.5s infinite alternate 0s;
}

.loading span:nth-child(2) {
  -webkit-animation:loading 0.5s infinite alternate 0.2s;
  -moz-animation:loading 0.5s infinite alternate 0.2s;
  -ms-animation:loading 0.5s infinite alternate 0.2s;
  -o-animation:loading 0.5s infinite alternate 0.2s;
  animation:loading 0.5s infinite alternate 0.2s;
}

.loading span:nth-child(3) {
  -webkit-animation:loading 0.5s infinite alternate 0.4s;
  -moz-animation:loading 0.5s infinite alternate 0.4s;
  -ms-animation:loading 0.5s infinite alternate 0.4s;
  -o-animation:loading 0.5s infinite alternate 0.4s;
  animation:loading 0.5s infinite alternate 0.4s;
}

.loading span:nth-child(4) {
  -webkit-animation:loading 0.5s infinite alternate 0.6s;
  -moz-animation:loading 0.5s infinite alternate 0.6s;
  -ms-animation:loading 0.5s infinite alternate 0.6s;
  -o-animation:loading 0.5s infinite alternate 0.6s;
  animation:loading 0.5s infinite alternate 0.6s;
}

@-webkit-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-moz-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-ms-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-o-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

Demo 

Lihat Demo

12 Komentar

Unknown

aku ngarep tutor jquery nya kok blum muncul2 :D

Unknown

mantap sob..!,

gmn carax pasang google translet kayak punya sobat..., aq dr td coba tp gk bisa2.., terima kasih... :)

Nothing

cara pasang ke blognya gmana bro??
maklum newbie

Taufik Nurrohman

@Lùçký T-télLøw Hehe... ini bukan untuk dipasang. Cuma sebagai karya seni saja. Kalau mau memasang lebih baik gunakan gambar animasi yang sesungguhnya. Lagipula inspirasi eksperimen seperti ini banyak sekali.

Unknown

@Taufik Nurrohmanklo penjelasanx se-simpe i2 pasti dimengerti olh sobat system of blog cz emank dia pny dasar2..,tp klo sy gak ngerti hehe.. gelap bro :), bisa dijelaskan lebih-lebih simple lg.., contoh penulisanx gmn..?? terima kasih :)

Unknown

@Taufik Nurrohmanlalu gmn klo mau dimasukkan dlm menu, sy mau naruh pas disamping menu 'Link Exchange', terima kasih.., tlong dijelaskan scr detail ya hehhe..., terima kasih :)

Taufik Nurrohman

@Rohis Facebook Navigasi blog biasanya terdiri dari elemen <li>, tinggal ikuti nadanya saja:

<li><a href='#' onclick='window.open(&quot;http://translate.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=id%7Cen&amp;hl=en&quot;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>

Komentar telah ditutup.