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.



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow