[TUT] Kako napravit loading animaciju sa CSS3

Pozdrav.  
Posto u zadnje vrijeme eksperimentisem sa CSS3 i dosta me je iznenadio odlucio sam da sa vama podjelim , da kazem 'fazon' u koje necete koristit jquery, flash ili nesto slicno a dobit ćete takav izgled.

Da krenemo :

Prvo sto nam treba jeste 4 linije HTML koda ne računajući osnovnu strukturu .
Što se tiče HTML koda napravit ćemo 1 div elemnt i dodjeliti mu klasu "ucitavanje" i unutar istog napravimo jos 3 div elemnta i dodjeliti im klase "trokut1" , "trokut2", "trokut3".
Kod :

<div class="ucitavanje">



           <div class="trokut1"></div>



           <div class="trokut2"></div>



           <div class="trokut3"></div>



      </div>?

Nakon sto smo odradili HTML kod ostaje nam još CSS .
Kod možete vidjeti ispod:

body{



  background: #fff;



} /* definisemo pozadinu body elementa */







.ucitavanje{



  width: 60px; height: 60px; /* Sirina i visina postavljena na 60px */



  position: absolute; /* postavlja element odmah do sledeceg */



  top: 50%; left: 50%; /* 50% od pocetka i 50% sa lijeve strane odvaja element */



  margin: -30px 0 0 -30px; /* margine gore i dole na -30px */



  background: #000;       /* pozadina crna */ 



  -moz-animation: rotation ease-in-out 2s infinite; /* Okrece element za 360% u 2 sekunde . -moz specifikacija za mozilu */ 



  -webkit-animation: rotation ease-in-out 2s infinite; /* Okrece element za 360% u 2 sekunde . -webkit specifikacija za chrome i mozzilu */



  animation: rotation ease-in-out 2s infinite; /* Okrece element za 360% u 2 sekunde */



  -webkit-border-radius: 30px; /* stavlja radius na 30px, da izgleda kao okdruglo */ 



  -moz-border-radius: 30px; /* stavlja radius na 30px, da izgleda kao okdruglo */ 



  border-radius: 30px;  /* stavlja radius na 30px, da izgleda kao okdruglo */    



}







.trokut1, .trokut2, .trokut3{



  border-width: 0 20px 30px 20px; /* Namjestamo border da element izgleda kao trokut */ 



  border-style: solid; /* puna linija bordera */



  border-color: transparent; /* boja providna */



  border-bottom-color: #ff0000;  /* boja donjeg bordera crvena */



  height: 0; width: 0; /* visina i sirina 0 */



  position: absolute;



  left: 10px; top: -10px;



  -moz-animation: fadecolor 2s 1s infinite; /* menja boje 2s, pa 1s */



  -webkit-animation: fadecolor 2s 1s infinite; /* menja boje 2s, pa 1s */



  animation: fadecolor 2s 1s infinite; /* menja boje 2s, pa 1s */



}







.trokut2, .trokut3{



  content: ''; 



  top: 20px; left: 30px; 



  -moz-animation-delay: 1.1s; /* produzava anmiaciju na 1.1s */ 



  -webkit-animation-delay: 1.1s;



  animation-delay: 1.1s;



}







.trokut3{



  left: -10px;



  -moz-animation-delay: 1.2s; /* produzava animaciju na 1.2s */



  -webkit-animation-delay: 1.2s;



  animation-delay: 1.2s;



}

PS : Vazan dio koda vam je prikazan ispod:

@-moz-keyframes rotation

{

    0% {-moz-transform: rotate(0deg);} /* Odreduje poziciju elementa kad je vrijeme 0.00s */

    20% {-moz-transform: rotate(360deg);} /* Odreduje poziciju elementa kad je vrijeme 0.20s */

    100% {-moz-transform: rotate(360deg);} /* Odreduje poziciju elementa kad je vrijeme 1s */

}

 

@-webkit-keyframes rotation

{

    0% {-webkit-transform: rotate(0deg);}

    20% {-webkit-transform: rotate(360deg);}

    100% {-webkit-transform: rotate(360deg);}

}

 

@keyframes rotation

{

    0% {transform: rotate(0deg);}

    20% {transform: rotate(360deg);}

    100% {transform: rotate(360deg);}

}          

 

@-moz-keyframes fadecolor

{

    0% {border-bottom-color: #ff9000;} /* druga boja narandzasta*/

    100%{border-bottom-color: #ff0000;} /* prva boja crvena */

}

 

@-webkit-keyframes fadecolor

{

    0% {border-bottom-color: #ff9000;}

    100%{border-bottom-color: #ff0000;}

}

 

@keyframes fadecolor

{

    0% {border-bottom-color: #ff9000;}

    100%{border-bottom-color: #ff0000;}

}​

To bi bilo to, CSS sam malo zbrzio oko objašnjavanja jer nisam htio da vam pišem dugu temu jer je veoma lagano napraviti ovo, al ako poznajete osnove ovo ćete lako shvatiti. 

Evo link kako bi sve to izgledalo: http://jsfiddle.net/qt6JY/1/


Uživajte i ako napravite nešto slično ovako podijelite ovdje,sretno. 

Dobar tut, fina animacija i što je još važnije pregledno i ljepo objašnjeno.

Hvala ti puno,bit će još ovakvih tutorijala  

CSS3 je veoma koristan za developere koji se bas ne snalaze sa Javascriptom (u nekim slucajevima), te moze i dobrim developerima olaksati posao.

Nije komplikovan i za kratko vrijeme mozete napraviti npr. neku animaciju za koju bi vam u JS trebalo malo vise vremena.Ipak on se jos ne moze porediti sa JS, jer to je druga dimenzija.

Svaka cast na tutorialu, odlican je 

Svaka čast, dobro objašnjen TuT.

Keep up the good work  

Hvala puno