Progress

Link copiato negli appunti

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.