CSS  »  Articoli  »  CSS Template e layout 

Le progress bar sono tra gli elementi grafici più usati nel comporre le moderne interfacce utente per il Web. Grazie ad esse l'utente non ha la sensazione sgradevole di stasi del sito, percepisce che c'è un processo in corso che giustifica l'attesa e può seguirne l'avanzamento.

Finora le progress bar venivano realizzate utilizzando immagini per gestire il background e Javascript per gestirne l'animazione; grazie alle nuove proprietà introdotte nella versione 3 del CSS possiamo invece realizzare il tutto con puro codice CSS.

In questo articolo vedremo come sia semplice realizzare una barra di avanzamento utilizzando esclusivamente il foglio di stile. Il risultato finale è visualizzato in Figura 1.

Figura 1. Progress Bar

Nell'esempio che stiamo per realizzare, utilizzeremo anche Javascript, ma esclusivamente per impostare il valore della progress bar e non per gestire l'animazione; cosa che delegheremo alla proprietà CSS transition.

Per il background utilizzeremo invece la funzione linear-gradient() che ci consente di creare facilmente un gradiente senza dover ricorrere a delle immagini esterne.

Il codice HTML della progress bar

Il markup di cui abbiamo bisogno è davvero molto semplice; abbiamo un div contenitore e uno span a cui andremo a modificare la larghezza a seconda delle nostre esigenze.

<div class="progress-bar">
    <span></span>
</div>

Codice CSS

Il codice CSS, contrariamente a quello che si possa pensare, è costituito da due sole regole.

Con la prima regola assegniamo un minimo di stile al div contenitore attraverso le proprietà box-shadow e border-radius:

.progress-bar {
    background-color: #1a1a1a;
    height: 25px;
    padding: 5px;
    width: 360px;
    margin: 60px 0;
            
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
            
    -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
    -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}

Con la seconda regola, invece, definiamo il colore di background ed il tipo di animazione che applicheremo al modificare del valore della progress bar. Anche in questo caso utilizzeremo anche le proprietà border-radius e box-shadow:

.progress-bar span {
    display: inline-block;
    height: 25px;
    width: 25%;
            
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
            
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;

    background: rgb(1,182,178);
    background: linear-gradient(bottom, rgb(1,182,178) 39%, rgb(27,219,214) 70%, rgb(54,255,255) 85%);
    background: -o-linear-gradient(bottom, rgb(1,182,178) 39%, rgb(27,219,214) 70%, rgb(54,255,255) 85%);
    background: -moz-linear-gradient(bottom, rgb(1,182,178) 39%, rgb(27,219,214) 70%, rgb(54,255,255) 85%);
    background: -webkit-linear-gradient(bottom, rgb(1,182,178) 39%, rgb(27,219,214) 70%, rgb(54,255,255) 85%);
    background: -ms-linear-gradient(bottom, rgb(1,182,178) 39%, rgb(27,219,214) 70%, rgb(54,255,255) 85%);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.39, rgb(1,182,178)), color-stop(0.7, rgb(27,219,214)), color-stop(0.85, rgb(54,255,255)));
}

Prima di vedere il codice per l'animazione soffermiamoci un momento sul background della barra di avanzamento. Possiamo notare che abbiamo una regola per ogni browser (Opera, Mozilla, Safari/Chrome, e Microsoft); la prima regola invece è l'unica proprietà che verrà interpretata dai browser che non supportano la funzione linear-gradient().

Il codice per assegnare l'animazione, invece, è il seguente:

.progress-bar span {
    /* ... */
    -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
    -o-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;
}

Non c'è molto da spiegare per l'animazione se non che agirà sulla larghezza dello span, durerà 0.4 secondi ed utilizzerà la funzione ease-in-out.

Possiamo vedere il risultato finale al seguente link.

Compatibilità

La barra di avanzamento che abbiamo appena realizzato è compatibile con tutti i browser moderni che supportano le nuove proprietà CSS3 come ad esempio le transizioni, i gradienti o i bordi arrotondati ma garantisce un corretto funzionamento anche per i browser un po' più datati. Su Internet Explorer 8, ad esempio, non avremo ombre o bordi arrotondati o animazioni nel movimento ma la barra funzionerà e verrà renderizzata correttamente.

Altri articoli

Altre guide

Altre newsletter