<progress>

Вбудований компонент браузера <progress> компонента дозволяє відображати індикатор виконання.

<progress value={0.5} />

Довідник

<progress>

Щоб відобразити індикатор виконання, відрендеріть вбудований у браузер <progress> компонент.

<progress value={0.5} />

Дивіться більше прикладів нижче.

Пропси

<progress> підтримує всі пропси спільних елементів.

Додатково, <progress> підтримує такі пропси:

  • max: Число. Вказує максимальне значення . За замовчуванням 1.
    • .
  • value: Число між 0 і max, або null для невизначеного прогресу. Вказує, скільки було зроблено.

Використання

Керування індикатором виконання

Щоб відобразити індикатор виконання, відрендеріть компонент <progress>. Ви можете передати число value між 0 та max значенням, яке ви вказали. Якщо ви не передасте значення max, за замовчуванням воно буде вважатися рівним 1.

Якщо операція не виконується, передайте value={null}, щоб перевести індикатор виконання у невизначений стан.

 
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} />
    </>
  );
}
progress { display: block; }