Chat Box

Sunday, 10 March 2013

Membuat loading page (Pure CSS)

Tinggalkan Komentar

Mau terlihat lebih dinamis website kalian ? nih gw mau share cara buat loading page agar terlihat lebih cool aja webnya :p
Pertama buat tag seperti berikut :
<div class='loadpage'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
Kemudian berikan style sperti berikut :
.loadpage {text-align:center;}

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

.loadpage 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;
}

.loadpage 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;
}

.loadpage 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;
}

.loadpage 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 loadpage {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

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

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

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

@keyframes loadpage {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}
*Saling menghargai antar bloger itu baik, sertakan sumber ketika ingin mengcopas artikel saya. Terimakasih 

Saling MENGHARGAI antar "Bloger" itu penting, sertakan sumber ketika ingin mengcopas artikel saya. Terimakasih

0 comments:

Post a Comment

Membuat loading page (Pure CSS)Oops ! | Error 404 To Top Submit ExpressSEO Services & Tools