<progress>

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

<progress value={0.5} />

Описание

<progress>

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

<progress value={0.5} />

Пропсы

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

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

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

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

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

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

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

App.jsCodeSandbox

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

Комментарии