In questo articolo verrà mostrato come ricreare l’animazione di caricamento classica di Facebook utilizzando esclusivamente le proprietà CSS3. Nel dettaglio verrà mostrato l’utilizzo della regola CSS3 denominata keyframes. Il codice è stato testato dall’autore nelle ultime versioni di Firefox, Chrome e Safari. Considerate che l’esempio seguente utilizza il piccolo plugin Prefix free, che permette di non specificare i vari prefissi nelle proprietà CSS3 per garantirne la compatibilità nei vari browser, altrimenti vanno aggiunti nelle proprietà CSS3 i vari prefissi -webkit-, -moz-, ecc.
Codice HTML
|
1 2 3 4 5 6 |
<!-- Facebook Loader --> <div class="loader"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> |
Codice CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* FACEBOOK LOADER */ .loader { width:32px; height:32px; } /* Initial state */ .bar { background-color:#99aaca; border:1px solid #96a6c9; float:left; margin-right:4px; margin-top:6px; width:6px; height:18px; /* Set the animation properties */ animation-duration: 1s; animation-iteration-count: infinite; animation-name: loadingbar; } /* Delay both the second and third bar at the start */ .loader .bar:nth-child(2) { animation-delay: 0.1s; } .loader .bar:nth-child(3) { animation-delay: 0.2s; } /* The actual animation */ @keyframes loadingbar { 0% { } 10% { margin-top:5px; height:22px; border-color:#d1d8e6; background-color:#bac5db; } 20% { margin-top:0px; height:32px; border-color:#d1d7e2; background-color:#c6ccda; } 30% { margin-top:1px; height:30px; border-color:#d1d8e6; background-color:#bac5db; } 40% { margin-top:3px; height:26px; } 50% { margin-top:5px; height:22px; } 60% { margin-top:6px; height:18px; } 70% { } /* Missing frames will cause the extra delay */ 100% { } } |
Demo Download Info | Sito Web | Autore
pixolo ads
| Articolo pubblicato 5 anni fa nella categoria 
