The built-in browser <progress> component lets you render a progress indicator.
브라우저 빌트인 <progress> 컴포넌트를 사용하면 진행률 표시기를 렌더링할 수 있습니다.
<progress value={0.5} />Reference참조
<progress>
To display a progress indicator, render the built-in browser <progress> component.
진행률 표시기를 렌더링하려면 브라우저 빌트인 <progress> 컴포넌트를 렌더링합니다.
<progress value={0.5} />See more examples below. 아래에서 더 많은 예시를 확인하세요.
Props
<progress> supports all common element props.
<progress>는 모든 일반적인 요소의 props를 지원합니다.
Additionally, <progress> supports these props:
또한 <progress>는 다음 props를 지원합니다:
-
max: A number. Specifies the maximumvalue. Defaults to1.max: 숫자. 최대값을 지정합니다. 기본값은1입니다. -
value: A number between0andmax, ornullfor indeterminate progress. Specifies how much was done.value:0에서max사이의 숫자, 혹은 정해지지 않은 경우null입니다. 수행한 작업의 양을 지정합니다.
Usage사용법
Controlling a progress indicator진행률 표시기 제어
To display a progress indicator, render a <progress> component. You can pass a number value between 0 and the max value you specify. If you don’t pass a max value, it will assumed to be 1 by default.
진행률 표시기를 표시하려면 <progress> 컴포넌트를 렌더링합니다. 0과 max 사이의 숫자 value를 전달할 수 있습니다. max 값을 전달하지 않으면 기본적으로 1로 간주됩니다.
If the operation is not ongoing, pass value={null} to put the progress indicator into an indeterminate state.
작업 진행 중이 아닌 경우, 진행률 표시기를 불확정 상태로 설정하려면 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} /> </> ); }