Progress Bar animata con CSS3

 

Le barre di avanzamento sono molto importanti per mantenere gli utenti informati sullo stato di avanzamento di un processo sul web. Di seguito viene mostrato come realizzare una barra di avanzamento animata utilizzando esclusivamente codice CSS: nessuna componente flash, nessuna immagine e nessuno script.

Tutto quello che serve sono due div, il primo div rappresenterà il contenitore principale che avrà angoli arrotondati e un effetto ombra, il secondo div sarà la barra di avanzamento effettiva.
Se volete potete aggiungere una casella di input ed un pulsante per il controllo della barra di avanzamento.

Il codice HTML

Ed ora il codice CSS

 
Demo Download Info | Sito Web | Autore

pixolo ads
Animal Comix
3034 | Articolo pubblicato 4 anni fa nella categoria Css - Html.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
3
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×