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!

Articoli Correlati

37 sistemi di navigazione con i css

 Interessantissima carrellata di sistemi di navigazione per siti web fatti con i fogli di stile. Vitaly Friedman ha raccolto ben 37 modi per creare il proprio "menu" con i css e li elenca nel proprio sito. Una lista…
, ,

Vademecum CSS

Fogli di stile? Questi sconosciuti. Per chi è alla ricerca di qualche utile informazione su come funzionano i fogli di stile, ecco un ottimo documento. Lo consiglio anche ai più esperti, rinfrescare queste semplici regole non fa mai male!!!…

Blueprint: arriva il framework CSS

Sono capitato per sbaglio sull'homepage di Bluprint e fin dall'inizio mi ha interessanto l'argomento: un framework per CSS. Non ne avevo mai sentito parlare e allora ho speso un paio d'ore a capire cosa fosse di preciso. Ora cerco di spiegarvelo.
, , , , ,

Spedire un’email HTML/CSS? Lascia perdere…

Siete avviliti per non riuscire a creare un'email HTML usando i fogli di stile? Bhe... lasciate stare, l'impresa è impossibile. Alcuni client email la leggeranno bene, altri invece no e per sensibilità democratica non ci si può permettere che una fetta di lettori non la riescano a leggere.
, , , ,

Scrivere e ripulire un foglio di stile: due strumenti per CSS

Ora vi presento due strumenti utili per chi deve lavorare con i fogli di stile. Sono entrambi gratuiti e di di facile utilizzo.

Altri articoli...

Modello a Box dei CSS

Ecco un diagramma chiarificatore del “modello a box” imposto dai fogli di stile (css) sugli oggetti html (Jon Hicks). Una versione animata (flash) la si può vedere invece su redmelon.net . Grazie a Forgetfoo

Logo Web 2.0: un generatore automatico

Simpatica applicazione che genera logo in maniera automatica aggiungendo un riflesso e il classico bollino in perfetto stile Web 2.0. Da provare.
,

10 trucchi con i CSS

In questo ottimo articolo, vengono esposti 10 trucchi con i fogli di stile che facilitano la vita a noi programmatori web. Sono suggerimenti, dritte che normalmente non si conoscono. Veramente utile.


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

09 giu 08

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

Scrivi il tuo commento

* Nome, Email e Commento sono richiesti

Vuoi ricevere gli ultimi articoli e tenere d'occhio i commenti direttamente sul tuo PC?

Dynamick Toolbar

Potrai inoltre navigare ascoltando decine di radio on line, accedere a centinaia di TV in streaming e chattare con gli altri visitatori del sito.

Per Windows 2000/XP. No spyware!

Libere offerte di viaggio