Older but Usefully, Right!!!

Artikel singkat sedikit lawas, let's talk about trick how to make CSS 3 Loading Animations. Membuat efek loading hanya menggunakan variabel CSS3 animation Sebelum masuk ke beberapa link resource yang membicarakan tema ini, Koben akan berbagi kode CSS loading animasi yg sederhana. Perhatikan demo berikut:

Example Simple Loading use CSS

.circleLoading {
    width: 10px;
    height: 10px;
    margin: 15px auto;
    position: relative;
    border: 5px solid rgba(255, 101, 0, 0.9);
    border-top: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    box-shadow: 0 0 15px #DD4808;
    -moz-animation: spinoff .7s infinite linear;
    -webkit-animation: spinoff .7s infinite linear;
}
@-moz-keyframes spin {
    0% {
    -moz-transform:rotate(0deg);
    }
    100% {
    -moz-transform:rotate(360deg);
    }
}
@-moz-keyframes spinoff {
    0% {
    -moz-transform:rotate(0deg);
    }
    100% {
    -moz-transform:rotate(-360deg);
    }
}
@-webkit-keyframes spin {
    0% {
    -webkit-transform:rotate(0deg);
    }
    100% {
    -webkit-transform:rotate(360deg);
    }
}
@-webkit-keyframes spinoff {
    0% {
    -webkit-transform:rotate(0deg);
    }
    100% {
    -webkit-transform:rotate(-360deg);
    }
}

Property HTML<div class="circleLoading"></div>Versi para developer

1. tympanus.net/Tutorials/LoadingAnimations/
2. www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Loading-Animation/index.html
3. www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html
4. www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop-set2/index.html
5. www.red-team-design.com/wp-content/uploads/2012/03/css3-loading-animation-experiment-demo.html
6. blog.crazyegg.com/demos/css_only_loading_spinner/

Jika malas dan pusing dengan kode CSS loading, terpaksa pakai tools membuat loading dengan css CSS Load.net :D Sebagai bonus gue akan share tools keren punya yaitu generate css selectors from html on a click using jQuery! Apakah itu?

Pencetlah tombol generate. Paham!!!
Resource by: http://www.webdeveloperjuice.com/2012/06/08/generate-css-selectors-from-html-on-a-click-using-jquery-cssgrab-reloaded/
You can look the great CSS Loading Icons
Semoga bermanfaat :)
Happy blogging \m/