Load animasi loop dengan css3

css3 loading animation effect
efek loading animasi ini terinspirasi dari css3-loading-animation-loop. dan beberapa animasi lainnya bisa anda lihat di sana. efek ini bisa kita gunakan dengan beberapa kegunaan pada blog di antaranya membuat loading halaman,load widget,load iframe dan lain sebagainya.
HTML
<div class="loader"></div>
<div class="loader2"></div>
.loader {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(225, 0, 56, 0.8);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #ff3300;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:berputar 1s infinite ease-in-out;
    -webkit-animation:berputar 1s infinite linear;
}
.loader2 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(225, 0, 56, 0.8);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #ff3300;
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-50px;
    -moz-animation:berputarkecil 1s infinite linear;
    -webkit-animation:berputarkecil 1s infinite linear;
}
@-moz-keyframes berputar {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes berputarkecil {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes berputar {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes berputarkecil{
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}
Lihat Demo

license by under 88 blogspot.com
Post By : Denddy Gustiana
reference : www.alessioatzeni.com

10 comments:

  1. wih mantep efek loadingnya :-bd

    ReplyDelete
  2. sy pernah liat di blog tetangga juga, tp udaaah laamaa :D

    ReplyDelete
  3. cara pasang nya gmn bro??
    bingung ane :/

    ReplyDelete
  4. mantap sob loadignya...
    ijin pasang.. hehe..

    ReplyDelete
  5. keren sob :)
    blognya-efry.blogspot.com

    ReplyDelete
  6. bang ane share di blog ku juga ya \o/

    ReplyDelete
  7. untuk menutupi seluruh blog gmn cara meletakkan sciptnya

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top