Progress bar animata con CSS e immagini

Pubblicato il 08/04/2008 da Matteo Moro in css, esempi, grafica, tutorial

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.

Progress Bar
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.

Commenti

3 commenti per “Progress bar animata con CSS e immagini”

  1. ZicZac.it, clicca qui e vota questo articolo! il 08/04/2008 07:11

    Questo articolo è stato segnalato su ZicZac.it….

    …

  2. diggita.it il 08/04/2008 07:11

    Progress bar animata con CSS e immagini…

    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 immag…

  3. Simone D’Amico » Blog Archive » Progress bar animata con CSS e immagini il 24/10/2008 00:07

    [...] | CSSblog posted under CSS, [...]

Commenta il post