Progress

로딩, 업로드, 다운로드 등의 진행상황을 실시간으로 사용자에게 보여줍니다.

TypescriptWAI-ARIA

팝오버를 구성하는 요소를 설명합니다.

Default Progress
Progress Indicator는 총 2가지의 애니메이션이 존재합니다. 일반적인 경우, 트랙을 따라 왼쪽에서 오른쪽으로 인디케이터 라인이 채워져 진행정도를 알 수 있습니다.
Timer Progress
타이머와 같은 기능을 하는 경우, 인디케이터의 라인이 다 채워진 채로 시작하여 점차 왼쪽을 향해 사라져 남은 시간의 정도를 알 수 있습니다.

import { Progress } from '@goorm-dev/vapor-components';

코드보기

<div className="p-4 w-100">
    <Progress value={50} />
</div>

name	description	default
size	Progress의 크기를 결정합니다. smmd	sm
color	Progress의 색깔을 결정합니다. primarysuccesswarningdangerhintcontrast	primary
value	진행 정도를 나타냅니다. number	0
max	최대값을 나타냅니다. number	100
className	string
barClassName	string
striped	Progress에 줄무늬를 추가합니다.	false
animated	Progress에 애니메이션을 추가합니다.	false
bar	boolean
multi	boolean
tag	string
cssModule	CSSModule
barStyle	CSSModule
barAriaValueText	string
barAriaLabelledBy	string