Membuat Gold Loader

CSS
#loader {
  position:relative;
  top:50%;
  left:43%;
}
.spin {
  width:10px;
  height:10px;
  border-radius:100%;
  box-shadow:0 0 10px orange;
  background:#FFECBA;
  float:left;
  margin:5px;
  -webkit-transform:scale(2);
}
.spin:nth-child(1){
  -webkit-animation: s1 1s infinite linear;
}
.spin:nth-child(2){
  -webkit-animation: s2 1s infinite linear;
  -webkit-animation-delay:0.2s;
}
.spin:nth-child(3){
  -webkit-animation: s3 1s infinite linear;
  -webkit-animation-delay:0.3s;
}
.spin:nth-child(4){
  -webkit-animation: s4 1s infinite linear;
  -webkit-animation-delay:0.4s;
}
.spin:nth-child(5){
  -webkit-animation: s5 1s infinite linear;
  -webkit-animation-delay:0.5s;
}
.spin:nth-child(6){
  -webkit-animation: s6 1s infinite linear;
  -webkit-animation-delay:0.6s;
}
@-webkit-keyframes s1 {
  50% {background:#FFBB00;-webkit-transform:scale(1);}
}
@-webkit-keyframes s2 {
  50% {background:#FFBB00;-webkit-transform:scale(1);}
}
@-webkit-keyframes s3 {
  50% {background:#FFBB00;-webkit-transform:scale(1);}
}
@-webkit-keyframes s4 {
  50% {background:#FFBB00;-webkit-transform:scale(1);}
}
@-webkit-keyframes s5 {
  50% {background:#FFBB00;-webkit-transform:scale(1);}
}
@-webkit-keyframes s6 {
  50% {background:#FFBB00;-webkit-transform:scale(1);}
}

HTML
<div id="loader">
  <div class="spin"></div>
  <div class="spin"></div>
  <div class="spin"></div>
  <div class="spin"></div>
  <div class="spin"></div>
  <div class="spin"></div>
</div>

Hasilnya:



Happy Blogging!

Allowed tag: <i>...</i> <b>...</b> [img]...[/img] <youtube>...</youtube> [pre]...[/pre]

Emoticons

:) :D :coffee :( :malu :sorry :takut :ultah :traveller :sup :sup2 :toast :confused :wizard :manyun :zzz :cool :lol :cat :mad :bandit :smoking