Favolose Progress Bar realizzate esclusivamente con i CSS

---

Sembra davvero strano, ma quello che potete vedere direttamente con i vostri occhi a questo indirizzo è strabiliante: Pure CSS Progress bar. Solo codice CSS per rendere così particolari queste barre di progresso.

Il concetto che sta alla base di questa tecnica è abbastanza semplice, ed un piccolo trucchetto aiuta: lo sfondo o background in formato gif, è un’animazione che simula la crescita della barra; viene inserita in un contenitore, specificandone larghezza ed altezza. In seguito viene semplicemente definita a piacere l’area di visibilità e dell’animazione.

Sarà quindi possibile far sembrare interrotta ad un certo determinato livello l’animazione, dando l’effetto di una vera e propria progress bar. Utile per assegnare dei punteggi standard e simularne l’avanzamento in un grafico per esempio.

Bella idea e geniale applicazione.

via [cssglobe]