Grove UI Framework
UI Elements
ProgressBar
ProgressBar
다운로드, 파일 전송 또는 설치와 같은 프로세스의 진행 시간 및 진행률에 대한 피드백을 제공하여 사용자가 대기할 시간을 나타냅니다.
Types
Default
25%
<div class="progress_back progress_back_md"> <div class="progress_bar"> <div class="progress_ratio hidden">25%</div> </div> </div>
소스 코드가 복사되었습니다.
Size
Small
25%
<div class="progress_back progress_back_sm"> <div class="progress_bar"> <div class="progress_ratio hidden">25%</div> </div> </div>
소스 코드가 복사되었습니다.
Medium
25%
<div class="progress_back progress_back_md"> <div class="progress_bar"> <div class="progress_ratio hidden">25%</div> </div> </div>
소스 코드가 복사되었습니다.
Large
25%
<div class="progress_back progress_back_lg"> <div class="progress_bar"> <div class="progress_ratio hidden">25%</div> </div> </div>
소스 코드가 복사되었습니다.
XLarge
25%
<div class="progress_back progress_back_xlg"> <div class="progress_bar"> <div class="progress_ratio hidden">25%</div> </div> </div>
소스 코드가 복사되었습니다.
Usage
Progress
25%
<div class="progress_back progress_back_lg"> <div class="progress_bar"> <div class="progress_ratio">25%</div> </div> </div>
소스 코드가 복사되었습니다.
Labels
200%
파일 업로드 중..
<div class="progress_wrap"> <div class="progress_back progress_back_lg"> <div class="progress_bar"> <div class="progress_ratio">100%</div> </div> </div> <div class="progress_label"> <p class="txt">파일 업로드 중..</p> </div> </div>
소스 코드가 복사되었습니다.
Colors
25%
25%
25%
25%
<div class="progress_back progress_back_md"> <div class="progress_bar bg_red"> <div class="progress_ratio hidden">25%</div> </div> </div> <div class="progress_back progress_back_md"> <div class="progress_bar bg_yellow"> <div class="progress_ratio hidden">25%</div> </div> </div> <div class="progress_back progress_back_md"> <div class="progress_bar bg_green"> <div class="progress_ratio hidden">25%</div> </div> </div> <div class="progress_back progress_back_md"> <div class="progress_bar bg_blue"> <div class="progress_ratio hidden">25%</div> </div> </div>
소스 코드가 복사되었습니다.