Fino a qualche anno fa una progress bar era possibile farla solamente in Flash. Ora con l’avvento dei framework Javascript e con l’uso sistematico dei fogli di stile il Flash è passato in secondo piano perchè quasi completamente sostituito.
In questo breve tutorial, Alen Grakalic mostra come creare una progress bar fatta esclusivamente con fogli di stile e immagini. L’idea è di creare un contenitore di dimensione fissa e con overflow=hidden che ha come background la progress bar completa. Un secondo elemento contenente un’immagine bianca, posizionato in maniera assoluta sopra al primo, viene fatto scorrere per creare l’effetto animato finale.
L’idea è semplice ma efficace. Potete vedere l’effetto finale tramite gli esempi nella demo, oppure scaricare direttamente il codice già scritto per voi!