Anda Sedang membaca Simple Css Loaders With Animations

Simple Css Loaders With Animations

  • Sabtu, 28 Juli 2012
  • azhar
    • Nice post ☆ : Sebelumnya Nice post Memposting css3 Sticky Note,kali ini saya akan memberikan sebuah trik Css yaitu Simple Css Loaders atau loading murni dengan css.

    Saat pertama kali kita membuka suatu website pasti akan ada apa itu namanya loading atau menunggu proses.
    Di postingan kali ini saya
    memberikan trik loading yang simple.

    Perhatikan Kode bawah ini :
    Kode CSS : Kode Css sangatlah simple untuk di pelajari dan di kembangkan,seperti yang ada di bawah ini.

    .container {
 width: 450px;
 margin: 40px auto;
 overflow: hidden;
}

.loader_back {
 width: 66px;
 height: 66px;
 padding: 10px;
 color: #fff;
 font-weight: bold;
 text-align: center;
 background: #000;
 
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 
 float: left;
 margin: 10px;
}

.loader {
 width: 50px;
 height: 50px;
 border-right: 8px solid #4D4D4D;
 border-bottom: 8px solid #4D4D4D;
 
 margin: auto;
 
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 
 -webkit-animation: rotate 2s infinite linear;
 -moz-animation: rotate 2s infinite linear;
 -ms-animation: rotate 2s infinite linear;
 animation: rotate 2s infinite linear;
}

.loader.yellow {
 border-left: 8px solid #CCC366;
 border-top: 8px solid #CCC366;
}

.loader.orange {
 border-left: 8px solid #CC8F66;
 border-top: 8px solid #CC8F66;
}

.loader.red {
 border-left: 8px solid #CC6866;
 border-top: 8px solid #CC6866;
}

.loader.pink {
 border-left: 8px solid #CC66C3;
 border-top: 8px solid #CC66C3; 
}

.loader.violet {
 border-left: 8px solid #A366CC;
 border-top: 8px solid #A366CC; 
}

.loader.blue {
 border-left: 8px solid #6670CC;
 border-top: 8px solid #6670CC; 
}

.loader.green {
 border-left: 8px solid #66CC74;
 border-top: 8px solid #66CC74; 
}

@-webkit-keyframes rotate {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(360deg);}
}
@-ms-keyframes rotate {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(360deg);}
}
@keyframes rotate {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(360deg);}
}

    Untuk mengaktifkan kode css di atas kita memerlukan sebuah pemanggil yaitu  HTML :
    Seperti yg di bawah ini.[credit=cssdeck.com]
    <div class="container">
 
<div class="loader_back">
 <div class="loader yellow"></div>
</div> 

    Untuk Melihat klik Demo : 
  • Label: