Dall'archivio script > HTML5

Progressbar e Meter in HTML5

di Andrea ColaciAndrea Colaci,

I tag progress e meter di HTML5 entrano in gioco quando occorre rappresentare graficamente una grandezza.
Il tag progress produce una progressbar ed è utilizzato per rappresentare il completamento un processo "interattivo", ad esempio l'upload di un file.
E' possibile valorizzare il completamento della progress bar oppure visualizzare un valore indeterminato, ad esempio quando non siamo in condizioni di calcolare il valore massimo, ma dobbiamo far percepire all'utente che un operazione è ancora in corso.

Gli attributi previsti dal tag progress sono due:

  • Value: indica l'attuale completamento
  • Max: indica il "fondo scala"

Non esiste una unità di misura di riferimento per il completamento e per il valore massimo: sono semplici numeri.

Il tag meter, è simile a progress, ma è indicato per rappresentare una grandezza scalare, una lettura di un valore "statico", il cui aspetto differisce in funzione del raggiungimento di alcune soglie.
La specifica consiglia di indicare l'unità di misura, in maniera testuale, nell'attributo title.


Per avere un idea dell'utilizzo del tag meter ed le relative soglie, è sufficiente dare un occhiata al codice di esempio:

HTML
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <style type="text/css">
      label{
        display: inline-block;
        width: 150px;
      }
    </style>
    <h3>Progressbar</h3>
    <dd>
      <dl><label>Valore indeterminato</label>
        <progress></progress>
      </dl>
      <dl><label>Valore 75%</label>
        <progress max="100" value="75"></progress>
      </dl>
    </dd>
    <h3>Meter</h3>
    <dd>
      <dl><label>Sotto soglia minima</label>
        <meter title="Volts" low="6" optimum="12" high="14" max= "20" value="1.0">1v</meter>
      </dl>
      <dl><label>Soglia minima</label>
        <meter title="Volts" min="0" low="6" optimum="12" high="14" max= "20" value="6.0">6V</meter>
      </dl>
      <dl><label>Valore ottimale</label>
        <meter title="Volts" min="0" low="6" optimum="12" high="14" max= "20" value="12.0">12V</meter>
      </dl>
      <dl><label>Sotto soglia alta</label>
        <meter title="Volts" min="0" low="6" optimum="12" high="14" max= "20" value="13.5">15V</meter>
      </dl>
      <dl><label>Oltre soglia alta</label>
        <meter title="Volts" min="0" low="6" optimum="12" high="14" max= "20" value="14.5">15V</meter>
      </dl>
        <dl><label>Massimo</label>
        <meter title="Volts" min="0" low="6" optimum="12" high="14" max="20" value="20.0">20V</meter>
      </dl>
    </dd>
  </body> 
</html>

Le specifiche complete sono disponibili qui:

http://www.w3.org/TR/html5/the-progress-element.html#the-progress-element
http://www.w3.org/TR/html5/the-meter-element.html#the-meter-element

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi