<progress>

<progress value={0.5} />

• Справочник
  • <progress>
• Использование
  • Управление индикатором выполнения

Справочник

<progress>

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

<progress value={0.5} />

См. примеры ниже.

Свойства

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

Кроме того, <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} />
    </>
  );
}