Progress

7 marzo 2011

Funzioni e dati tecnici

L’elemento <progress> rappresenta lo stato di completamento di un compito e può essere di due tipi:

  • indeterminato: indica che il compito (task) è in fase di completamento, ma che non è chiaro quanto ancora resta da fare prima che l’operazione sia completata (ad esempio perché l’operazione è in attesa della risposta di un host remoto);
  • determinato quando è possibile ricavare un numero quantificabile nel range da zero a un massimo, in modo da ottenere la percentuale di lavoro completato rispetto al totale(ad esempio un preloader di un’immagine).

Esistono due attributi che determinano lo stato di completamento dell’attivita del tag <progress>. L’attributo value, che specifica la quantità di lavoro completata, e l’attributo max, che specifica la quantità di lavoro richiesta in totale. Le unità sono arbitrarie e non specificate.

Tuttavia, i valori passati come attributi del tag <progress> non sono renderizzati e quindi dovrebbero comunque essere inseriti in forma testuale nell’HTML in modo da poter fornire un feedback più preciso agli utenti; inoltre questo elemento attualmente non viene renderizzato dalla maggior parte dei browser ed è quindi ancora sconsigliato il suo utilizzo.

<section>   
  <p>Caricamento: <progress id="mioLoader" max="100" value="30"><span>30</span>%</progress></p>   
</section>

Vediamone adesso un esempio concreto in questa demo (funziona nelle più recenti versioni di Opera e Google Chrome).

Gli attributi value e max, se presenti, devono essere valori validi. L’attributo value, se presente, deve avere un valore uguale o maggiore di zero e minore o uguale al valore dell’attributo max, se presente, o 1.0, in caso contrario. L’attributo max, se presente, deve avere un valore maggiore di zero.

Ovviamente, l’elemento <progress> deve essere utilizzato solamente per indicare lo stato in fase di progressione di un compito; per indicare quantitativamente la misura di un’oggetto o di uno stato non in progressione bisogna utilizzare l’elemento <meter>.

Data la complessità dell’argomento e la costante variazione delle specifiche a riguardo consigliamo di consultare il sito del WHATWG per un maggiore approfondimento.

Nella prossima lezione descriveremo brevemente gli altri tag semantici introdotti nella specifica HTML5.

Tabella del supporto sui browser

Nuovi tag semantici e strutturali Internet Explorer Firefox Safari Google Chrome Opera
<progress> No No No 8.0+ 11.0+
Tutte le lezioni

1 ... 17 18 19 ... 50

Se vuoi aggiornamenti su Progress inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Progress

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy