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!
2 commenti
Adobe si avvicina a Linux nel nome di Air Google lancia App Engine, la soluzione integrata per le applicazioni web Adobe Media Player, Flash contro tutti Files audio 1000 volte pù piccoli di un Mp3Una progress bar di puro CSS10 Effetti Javascript per migliorare il vostro sito Paginazione perfetta con i css Il Framework CSS ideale Indicatori di attività con i CSS Ajaxian Featured Tutorial: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery
In che modo è possibile associarla all’upload di un file?
C’è qualche script gia pronto!
Cmq complimenti per la progress bar!è veramente carina