Questa è la traduzione dell'articolo Pure CSS Animated Progress Bar di Alen Grakalic pubblicato originariamente su CSS Globe il 27 Marzo 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Ecco una semplice dimostrazione di come si può creare una barra di avanzamento animata usando solo i CSS. La tecnica è molto semplice. Abbiamo bisogno di tre elementi, un container e due elementi annidati.
Diamo subito uno sguardo alla demo e scarichiamo il file zip con tutto il materiale necessario.
L'idea
Inseriremo una bella immagine di sfondo nell'elemento contenitore e definiremo dimensioni fisse per la laghezza (width) e l'altezza (height). Il primo elemento figlio (uno span) fungerà da barra di avanzamento. Posizioneremo in maniera assoluta il secondo elemento figlio annidato (un em), sopra la barra di avanzamento e lo sposteremo sulla sinistra con il valore che ci serve. L'elemento em ha lo stesso background del contenitore, così si crea l'effetto di una barra di avanzamento che si ferma ad una certa percentuale.
Il markup
Per rispettare il più possibile la semantica ho usato una lista di definizione (dl) per definire i vari valori. Per una barra singola è possibile usare qualunque elemento.
<dd> <span><em style="left:100px">50%</em></span> </dd>
Ho deciso di usare uno stile inline per l'elemento <em> e per la definizione del suo posizionamento. È più conveniente scrivere entrambi i valori nello stesso posto una volta sola.
L'animazione
Come viene ottenuto l'effetto animato? Usando una GIF animata! Le ricordate? Lo span ha come sfondo un'immagine GIF della larghezza di 200px che si anima da 0 a 200px. Non importa che percentuale si usa, l'immagine avanza e poi si ferma. L'effetto dello stop ad una certa percentuale è ottenuto attraverso l'uso dell'elemento <em> come ho detto prima.
Posizionamento dell'elemento <em>
Nel mio esempio uso una barra di avanzamento larga 200px. Anche l'elemento <em> è largo 200px. Così ogni punto percentuale equivale a 2px. Se vogliamo spostare con accuratezza l'elemento <em> abbiamo bisogno di moltiplicare le percentuali per 2. Per esempio, il 50% corrisponde ad uno spostamento sulla sinistra dell'elemento <em> di 100px, 24% a 48px, 75% a 150px, etc.
