Le composant natif <progress> du navigateur vous permet d’afficher un indicateur de progression (généralement sous forme d’une barre).

<progress value={0.5} />

Référence

<progress>

Pour afficher un indicateur de progression, utilisez le composant natif<progress> du navigateur.

<progress value={0.5} />

Voir plus d’exemples ci-dessous.

Props

<progress> prend en charge toutes les props communes aux éléments.

En complément, <progress> prend en charge les props suivantes :

  • max : un nombre. Spécifie la value maximale. Par défaut 1.
  • value : un nombre entre 0 et max, ou null pour indiquer une progression indéterminée. Spécifie le taux de progression accomplie.

Utilisation

Contrôler un indicateur de progression

Utilisez un composant <progress> pour afficher un indicateur de progression. Vous pouvez passer une value numérique entre 0 et la valeur max que vous auriez précisée. Si vous ne passez pas de valeur max, celle-ci est supposée valoir 1 par défaut.

Si l’opération n’est pas en cours, ou que sa progression n’est pas déterminable, passez value={null} pour que l’indicateur de progression reflète cet état indéterminé.

export default function App() {
  return (
    <>
      <progress value={0} />
      <progress value={0.5} />
      <progress value={0.7} />
      <progress value={75} max={100} />
      <progress value={1} />
      <progress value={null} />
    </>
  );
}
Précédent<option>
Suivant<select>