◄ Min  Size Fonts: + | - | ± Color: Max ►

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/
Loading...
XOlder but Usefully, Right!!!
Membuat animasi loading full pakai variabel CSS 3 dan tools convert CSS selectors from HTML
Subscribe my posts Register For Free!

4 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE