Встроенный в браузер компонент <progress> отвечает за рендер индикатора прогресса.

<progress value={0.5} />

Справочник

<progress>

Для отображения индикатора прогресса отрендерите встроенный в браузер компонент <progress>.

<progress value={0.5} />

См. больше примеров ниже.

Пропсы

<progress> поддерживает все пропсы общих HTML-элементов.

Кроме того, <progress> поддерживает следующие пропсы:

  • max: число. Указывает максимальное value. По умолчанию 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} />
    </>
  );
}
Предыдущая глава<option>
Следующая глава<select>