Creare un loading animato con i CSS3

On 06.04.12, In css, tutorials, by

In questo semplice tutorial vedremo come creare un loading animato utilizzando solamente i CSS3.
Ovviamente l'esempio funziona solo sui browser che supportano le trasformazioni, transizioni e animazioni. Cominciamo!

 
<style type='text/css'>
    @-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}
#loading {
    border: 1px solid #000;
    border-right: 0;
    border-bottom: 0;
    -webkit-border-radius: 100px;
    height: 100px;
    width: 100px;
    margin: 100px;
    -webkit-transition: all 0.5s ease-in;
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         1.0s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
}
</style>
 
<body>
  
<div id="loading"></div>
 
</body>