Cara Membuat Animasi Loading Dengan CSS

cara membuat animasi loading dengan CSS

Hanya dengan CSS kita bisa buat Animasi Loading. Di dunia ini, segala sesuatu bisa jadi mungkin, kita tidak bisa orang lain mungkin bisa.. Orang lain tidak bisa justru kita mungkin yang bisa.. semacam itulah hidup.. Ga nyambung ya...? hehe...

Tips Trick CSS yang makin lama makin berkembang, membuat sesuatu yang tidak mungkin (dalam dunia blogging) dapat menjadi mungkin.

Banyak sekali Jagoan-jagoan blogger yang banyak menciptakan hal-hal baru di dunia (blogging) diantaranya. blog DTE, blog Kang Ismet, Blog Krtutor+ dll.

Apa ga kepingin blog kita seperti blog mereka, menyerap keahlian mereka..? Yu mari kita semua belajar bersama-sama..

Saat ini saya sendiri lagi belajar memahami nilai, penggunaan/penerapan CSS. Salah satunya animasi loading yang saya buat ini..

Cara Membuat Animasi Loading dengan CSS


    <div class="bulat">
        <div id="dalbulat"> 
          <span>L</span>
          <span>O</span>
          <span>A</span>
          <span>D</span>
          <span>I</span>
          <span>N</span>
          <span>G</span>
        </div>
        <div class="luarbulat"></div>
    </div>
    <div class="name">By <a href="http://info-kmu.blogspot.com/">Info [K-moe]</a>
    </div>

.name {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    color: #ccc;
}
.name a {
    color: #ccc;
    text-decoration: none;
}
.bulat {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 50px auto;
    cursor: pointer;
    border-radius: 110px;
    -webkit-border-radius: 110px;
}
#dalbulat {
    background-color: #222;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    border-radius: 110px;
    -webkit-border-radius: 110px;
    text-align: center;
    font-size:10px;
    color:#ccc;
    line-height: 90px;
}
.luarbulat {
    margin: 0 auto;
    background: #4FFC38;
    background: -webkit-radial-gradient(20% 20%, ellipse cover, #00ff00 0%, #21ca00 24%, transparent 74%, transparent 100%);
    background: radial-gradient(ellipse at 20% 20%, #00FF00 0%, #21CA00 24%, transparent 74%, transparent 100%);
    border-radius: 110px;
    -webkit-border-radius: 110px;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#dalbulat span {
    -webkit-animation:color 1.5s linear infinite;
    -moz-animation:color 1.5s linear infinite;
    -ms-animation:color 1.5s linear infinite;
    -o-animation:color 1.5s linear infinite;
    animation:color 1.5s linear infinite;
}
#dalbulat span:nth-child(1) {
    -webkit-animation-delay:0s;
    -moz-animation-delay:0s;
    -ms-animation-delay:0s;
    -o-animation-delay:0s;
    animation-delay:0s;
}
#dalbulat span:nth-child(2) {
    -webkit-animation-delay:.25s;
    -moz-animation-delay:.25s;
    -ms-animation-delay:.25s;
    -o-animation-delay:.25s;
    animation-delay:.25s;
}
#dalbulat span:nth-child(3) {
    -webkit-animation-delay:.45s;
    -moz-animation-delay:.45s;
    -ms-animation-delay:.45s;
    -o-animation-delay:.45s;
    animation-delay:.45s;
}
#dalbulat span:nth-child(4) {
    -webkit-animation-delay:.55s;
    -moz-animation-delay:.55s;
    -ms-animation-delay:.55s;
    -o-animation-delay:.55s;
    animation-delay:.55s;
}
#dalbulat span:nth-child(5) {
    -webkit-animation-delay:.65s;
    -moz-animation-delay:.65s;
    -ms-animation-delay:.65s;
    -o-animation-delay:.65s;
    animation-delay:.65s;
}
#dalbulat span:nth-child(6) {
    -webkit-animation-delay:.75s;
    -moz-animation-delay:.75s;
    -ms-animation-delay:.75s;
    -o-animation-delay:.75s;
    animation-delay:.75s;
}
#dalbulat span:nth-child(7) {
    -webkit-animation-delay:.85s;
    -moz-animation-delay:.85s;
    -ms-animation-delay:.85s;
    -o-animation-delay:.85s;
    animation-delay:.85s;
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes color {
    0% {
        color:#fff;
    }
    50% {
        color:transparent;
    }
    100% {
        color:#fff;
    }
}

Reaksi :
Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar