<progress>
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 lavalue
maximale. Par défaut1
.value
: un nombre entre0
etmax
, ounull
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} /> </> ); }
Error
Extra 185 of 186 byte(s) found at buffer[1]