브라우저 내장 컴포넌트 <progress>
를 사용하면 진행률 표시기를 렌더링할 수 있습니다.
<progress value={0.5} />
레퍼런스
<progress>
진행률 표시기를 표시하려면 브라우저 내장 컴포넌트 <progress>
를 렌더링합니다.
<progress value={0.5} />
Props
<progress>
는 모든 일반적인 엘리먼트 props를 지원합니다.
또한 <progress>
는 이러한 props를 지원합니다.
사용법
진행률 표시기 제어
진행률 표시기를 표시하려면 <progress>
컴포넌트를 렌더링합니다. 0
에서 지정한 최대
값 사이의 숫자 value
를 전달할 수 있습니다. 최대
값을 전달하지 않으면 기본적으로 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} /> </> ); }
Error
Extra 185 of 186 byte(s) found at buffer[1]