<progress>¶

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

1

<progress value={0.5} />

Описание¶

<progress>¶

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

1

<progress value={0.5} />

Пропсы

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

Дополнительно, <progress> поддерживает эти пропсы:

• max: Число. Определяет максимальное value. По умолчанию 1.
• value: Число от 0 до max, или null для неопределенного прогресса. Указывает, сколько было сделано.

Использование¶

Управление индикатором прогресса¶

Чтобы отобразить индикатор прогресса, создайте компонент <progress>. Вы можете передать число value между 0 и max значением, которое вы укажете. Если вы не передадите значение max, то по умолчанию оно будет равно 1.

Если операция не выполняется, передайте value={null}, чтобы перевести индикатор прогресса в неопределенное состояние.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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} />
        </>
    );
}

Источник — https://react.dev/reference/react-dom/components/progress

Комментарии