HTML
Elemento di progresso
Ricerca…
Parametri
| Parametro | Valore |
|---|---|
| max | Quanto lavoro richiede l'attività in totale |
| valore | Quanto del lavoro è già stato fatto |
| posizione | Questo attributo restituisce la posizione corrente dell'elemento <progress> |
| etichette | Questo attributo restituisce un elenco di etichette di elementi <progress> (se presenti) |
Osservazioni
L'elemento <progress> non è supportato nelle versioni di Internet Explorer meno di 10
L'elemento <progress> è l'elemento sbagliato da utilizzare per qualcosa che è solo un indicatore, piuttosto che il progresso del compito. Ad esempio, mostrare l'utilizzo dello spazio su disco utilizzando l'elemento <progress> è inappropriato. Invece, l'elemento <meter> è disponibile per questo tipo di casi d'uso.
Progresso
L'elemento <progress> è nuovo in HTML5 e viene utilizzato per rappresentare lo stato di avanzamento di un'attività
<progress value="22" max="100"></progress>
Questo crea una barra piena del 22%
Modifica del colore di una barra di avanzamento
Le barre di avanzamento possono essere abbinate al selettore di progress[value] .
Questo esempio fornisce una barra di avanzamento di una larghezza di 250px e un'altezza di 20 20px
progress[value] {
width: 250px;
height: 20px;
}
Le barre di avanzamento possono essere particolarmente difficili da stile.
Chrome / Safari / Opera
Questi browser usano il selettore -webkit-appearance per -webkit-appearance il tag progress. Per sovrascriverlo, possiamo resettare l'aspetto.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
Ora possiamo modellare il contenitore stesso
progress[value]::-webkit-progress-bar {
background-color: "green";
}
Firefox
Firefox disegna la barra di avanzamento in modo leggermente diverso. Dobbiamo usare questi stili
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */
}
Internet Explorer
Internet Explorer 10+ supporta l'elemento di progress . Tuttavia, non supporta la proprietà background-color . Dovrai invece usare la proprietà color.
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* Remove border from Firefox */
width: 250px;
height: 20px;
color: blue;
}
Fallback HTML
Per i browser che non supportano l'elemento di progress , è possibile utilizzarlo come soluzione alternativa.
<progress max="100" value="20">
<div class="progress-bar">
<span style="width: 20%;">Progress: 20%</span>
</div>
</progress>
I browser che supportano il tag di avanzamento ignoreranno il div nested all'interno. I browser legacy che non sono in grado di identificare il tag progress eseguiranno il rendering del div.