on Web Design

Una progress bar di puro CSS

progress bar in css

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!

scrivi un commento

Commento

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

  1. In che modo è possibile associarla all’upload di un file?
    C’è qualche script gia pronto!
    Cmq complimenti per la progress bar!è veramente carina

Webmention

  • Insel der Engel’ Giugno 9, 2008

    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