Progress bar animata con CSS e immagini

This entry was posted on October 24th, 2008 and is filed under CSS, Grafica.

Benvenuto! Se è la prima volta che arrivi sul blog, magari ti interessa iscriverti al mio feed RSS per restare aggiornato.

Nella rappresentazione grafica di dati numerici, le progress-bar sono strumenti utili per rendere più chiare le statistiche o confrontare dati. Grazie ad un’articolo di CSSGlobe.com, vedremo come realizzare una progress-bar animata utilizzando immagini e fogli di stile.

L’animazione si ottiene “al contrario” rispetto al verso in cui si muove la barra. Si applicherà uno sfondo del colore desiderato (che può essere sostituito anch’esso da un’immagine, per ottenere un effetto ancora migliore) a cui verrà sovrapposta un’animazione GIF bianca su sfondo trasparente, che si muoverà da 200 pixel fino a zero. In questo modo si otterrà l’effetto di crescita della barra fino al valore desiderato, spostando l’animazione nella posizione desiderata.