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:
<!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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Le novità di Angular: i miglioramenti alla CLI
Utilizzare gli snapshot con Azure File shares
Controllare gli accessi IP alle app con Azure Container Apps
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Eseguire una GroupBy per entity in Entity Framework
Reactive form tipizzati con FormBuilder in Angular
Utilizzare Model as a Service su Microsoft Azure
Copiare automaticamente le secret tra più repository di GitHub
Eseguire le GitHub Actions offline
Disabilitare automaticamente un workflow di GitHub (parte 2)
Creare un'applicazione React e configurare Tailwind CSS
I più letti di oggi
- Vuoi incontrare Bill Gates? Viaggia con ASPItalia.com!
- Customizzare il pager del DataGrid
- Stabilire un collegamento VPN tra una Web App e una Virtual Network
- Documentare ASP.NET Web API con Swagger
- Usare i servizi REST di BING per ottenere informazioni sulla posizione dell'utente
- Visual Studio 2005 CTP May