Progress

Progress

프로그레스(Progress)는 작업의 진행 상태나 완료 비율을 시각적으로 보여주는 컴포넌트예요. 단일 막대는 물론 여러 막대를 함께 표시할 수 있고, 색상·크기·애니메이션 변형과 콜백도 지원해요.

출처: 문서

본문

Types

Standard

표준 프로그레스 바예요.

Uploading Files

Indicating

표시형(indicating) 프로그레스 바는 작업의 현재 진행 수준을 시각적으로 보여줘요.

Funding

Content

Bar

progress 요소는 진행을 시각적으로 나타내는 막대(bar)를 포함할 수 있어요.

Progress

프로그레스 바는 현재 진행을 나타내는 텍스트 값을 포함할 수 있어요.

Centered Progress Text

프로그레스 안의 텍스트는 중앙에 배치될 수 있어요.

Label

progress 요소는 라벨을 포함할 수 있어요.

Uploading Files

Multiple Bars

progress 요소는 여러 개의 막대를 가질 수 있어요.

Multiple Bars with Text (Proportion)

프로그레스 바는 현재 비율을 나타내는 텍스트 값을 포함할 수 있어요.

Tickets
      
      
        $('.ui.multiple.progress').progress({
          text: {
            percent : '{bar} {percent}%',
            bars: ['WIP', 'Review', 'Hold', 'Merged']
          }
        });

States

Active

프로그레스 바는 활동 중임을 보여줄 수 있어요.

Uploading Files

Success

프로그레스 바는 성공 상태를 보여줄 수 있어요.

Everything worked, your file is all ready.

Warning

프로그레스 바는 경고 상태를 보여줄 수 있어요.

Your file didn't meet the minimum resolution requirements.

Error

프로그레스 바는 오류 상태를 보여줄 수 있어요.

There was an error.

Disabled

프로그레스 바는 비활성화될 수 있어요.

Indeterminate

프로그레스 바는 다양한 불확정(indeterminate) 상태로 표시될 수 있어요.

The indeterminate progress state is not supposed to be used in combination with multiple progress bars
      
      
          
              Pulsating (default)
          
      
      
          
              Filling
          
      
      
          
              Sliding
          
      
      
          
              Swinging

불확정 프로그레스 상태는 여러 개의 프로그레스 바와 함께 사용해서는 안 돼요. 불확정 진행은 속도도 달라질 수 있어요.

Slow
          
      
      
          
              Fast

Variations

Right aligned

프로그레스 바는 오른쪽 정렬되어 왼쪽으로 자랄 수 있어요.

Inverted

프로그레스 바는 색상이 반전될 수 있어요.

Uploading Files
        
        
          
            
          
          Success
        
        
          
            
          
          Warning
        
        
          
            
          
          Error

Basic

basic 프로그레스는 남아 있는 배경 막대가 제거돼요.

Attached

프로그레스 바는 요소의 진행을 보여줄 수 있어요.

Project
          
            Started in 2014
          
        
        
          
            
            22 Friends

Size

프로그레스 바는 크기가 달라질 수 있어요.

Tiny
      
      
        
        Small
      
      
        
        Standard
      
      
        
        Large
      
      
        
        Big

Color

다양한 색상을 가질 수 있어요.

Inverted Color

이 색상들은 어두운 배경에서 대비를 개선하도록 inverted 될 수도 있어요.

Initializing a progress bar

With metadata

프로그레스 바는 메타데이터로 초기화할 수 있어요.

$('#example1').progress();
      
      
        
          
          74% Funded

With Javascript

프로그레스 바는 Javascript 설정 객체로 초기화할 수 있어요.

$('#example2').progress({
          percent: 22
        });
      
      
        
          
          22% Earned

Task Completion Percent

Adding a Total Value

프로그레스 바는 총값에 대한 현재 값의 비율을 추적할 수 있어요. 알려진 수량을 가진 일련의 이벤트 진행을 추적할 때 유용해요. (예: 사진 20장 중 1장 업로드).

$('#example3')
          .progress('increment')
        ;
      
      
        
          
            
          
          Adding Photos
      
      
        $('#example3')
          .progress({
            total: 3
          })
        ;

Initializing with Metadata

프로그레스 바는 총값에 대한 현재 값의 비율을 추적할 수 있어요. 알려진 수량을 가진 일련의 이벤트 진행을 추적할 때 유용해요. (예: 사진 20장 중 1장 업로드).

$('#example4')
          .progress('increment')
        ;
      
      
        
          
            
          
          Adding Photos

Adding Custom Labels

프로그레스 바의 각 상태에 대한 템플릿 텍스트를 전달할 수 있어요. 프로그레스 바가 그 상태에 도달하면 자동으로 업데이트돼요.

{percent}
          Current percentage
        
        
          {value}
          Current value
        
        
          {total}
          Total value
        
        
          {left}
          Distance to total, or % progress left
      
      
        $('#example5')
          .progress('increment')
        ;
      
      
        
          
          Adding Photos
      
      
        $('#example5')
          .progress({
            text: {
              active  : 'Adding {value} of {total} photos',
              success : '{total} Photos Uploaded!'
            }
          })
        ;

템플릿 토큰: {percent}(현재 퍼센트), {value}(현재 값), {total}(총값), {left}(총까지의 거리 또는 남은 %).

Translation

텍스트 라벨을 조정해 문자열을 번역된 것처럼 보이게 할 수도 있어요.

$('#example6')
          .progress('increment')
        ;
      
      
        
          
            
          
          Carga de archivos
      
      
        $('#example6')
          .progress({
            label: 'ratio',
            text: {
              ratio: '{value} de {total}'
            }
          })
        ;

Behavior

다음 모든 행동들은 다음 구문을 사용해 호출할 수 있어요:

.ui.your.element')
      .progress('behavior name', argumentOne, argumentTwo)
    ;

행동	설명
set percent(percent)	현재 진행 퍼센트를 값으로 설정해요. total을 사용하면 percent에서 추정 값으로 변환해요. percent는 .ui.multiple.progress에서 [20,30,50] 같은 배열이나 '20,30,50' 같은 쉼표 구분 문자열일 수 있어요.
set progress(value)	진행을 지정된 값으로 설정해요. total에서 자동으로 percent를 계산해요. value는 배열이나 쉼표 구분 문자열일 수 있어요.
increment(incrementValue)	진행을 증가 값만큼 증가시켜요. 값을 전달하지 않으면 설정에 지정된 임의 양을 사용해요.
decrement(decrementValue)	진행을 감소 값만큼 감소시켜요. 값을 전달하지 않으면 설정에 지정된 임의 양을 사용해요.
update progress(value)	즉시 진행을 값으로 업데이트해요. 진행 애니메이션 간격 지연을 무시해요.
complete(keepState)	진행을 끝내고 로드를 100%로 설정해요. keepState를 true(기본 false)로 설정하면 진행을 100%로 올리지 않고 활성 애니메이션만 멈춰요.
reset	진행을 0으로 재설정해요.
set total(total)	total을 새 값으로 설정해요.
get text(text)	템플릿 문자열을 value, total, percent left, percent로 대체해요.
get normalized value(value)	total에 지정된 허용 범위 안의 정규화된 값을 반환해요.
get percent	마지막으로 지정된 대로 percent를 반환해요.
get value	현재 진행 값을 반환해요.
get total	total을 반환해요.
is complete	진행이 완료되었는지 반환해요.
is success	진행이 성공이었는지 반환해요.
is warning	진행이 경고 상태인지 반환해요.
is error	진행이 오류 상태인지 반환해요.
is active	진행이 활성 상태인지 반환해요.
set active	진행을 활성 상태로 설정해요.
set warning(text, keepState)	진행을 경고 상태로 설정해요. keepState를 true(기본 false)로 설정하면 프로그레스바 상태와 현재 퍼센트를 100%로 올리지 않고 유지해요.
set success(text, keepState)	진행을 성공 상태로 설정해요.
set error(text, keepState)	진행을 오류 상태로 설정해요.
set duration(value)	진행 애니메이션 속도를 변경해요.
set label(text)	진행 외부 라벨을 텍스트로 설정해요.
set bar label(text)	진행 막대 라벨을 텍스트로 설정해요.
remove active / remove warning / remove success / remove error	프로그레스에서 해당 상태를 제거해요.
destroy	인스턴스를 파괴하고 모든 이벤트를 제거해요.

Examples

Frequently Updated Progress

프로그레스 바는 애니메이션을 완료한 후 마지막 진행 값을 자동으로 폴링해, UI 업데이트보다 업데이트 이벤트가 훨씬 자주 발생해도 애니메이션 이징이 매끄럽게 계속 동작하게 해요.

Rapidly Update
      
      
        
          
            
          
          Waiting for you to press button
      
      
        $('.rapid.example .ui.button')
          .on('click', function() {
            var
              $progress       = $('.rapid.example .ui.progress'),
              $button         = $(this),
              updateEvent
            ;
            // restart to zero
            clearInterval(window.fakeProgress)
            $progress.progress('reset');

            // updates every 10ms until complete
            window.fakeProgress = setInterval(function() {
              $progress.progress('increment');
              $button.text( $progress.progress('get value') );
              // stop incrementing when complete
              if($progress.progress('is complete')) {
                clearInterval(window.fakeProgress)
              }
            }, 10);
          })
        ;
        $('.rapid.example .ui.progress')
          .progress({
            duration : 200,
            total    : 200,
            text     : {
              active: '{value} of {total} done'
            }
          })
        ;

Progress Settings

Form 설정은 프로그레스 동작을 수정해요.

설정	기본값	설명
autoSuccess	true	진행이 완료될 때 성공 상태가 자동으로 트리거되어야 할지 여부예요.
showActivity	true	증가될 때 진행이 자동으로 활동을 표시할지 여부예요.
limitValues	true	true로 설정하면 100%를 초과하거나 0% 미만으로 계산되는 값을 조정해요. false로 설정하면 부적절한 값이 오류를 생성해요.
label	percent	진행을 percent 또는 ratio로 표시하도록 설정할 수 있어요. 같은 이름의 해당 텍스트 템플릿과 일치해요.
duration	300	막대가 다음 값으로 애니메이션되는 밀리초예요.
random	{ min: 2, max: 5 }	값을 지정하지 않고 증가할 때 임의 증가 값의 범위를 설정해요.
precision	0	계산된 진행의 소수점 정밀도예요.
total	false	total 값을 설정하면 increment 호출마다 이 total에 가까워져요 (예: 1/20, 2/20...).
value	false	현재 값을 설정해요. total이 지정되면 이것으로 total의 비율을 계산하고, percent라면 전체 percent가 돼요.

Callbacks

Callbacks는 특정 행동 이후 발생할 함수를 지정해요.

콜백	매개변수	컨텍스트	설명
onChange	percent, value, total	Progress	퍼센트 변경 시 콜백이에요.
onSuccess	total	Progress	성공 상태 시 콜백이에요.
onActive	value, total	Progress	활성 상태 시 콜백이에요.
onError	value, total	Progress	오류 상태 시 콜백이에요.
onWarning	value, total	Progress	경고 상태 시 콜백이에요.

DOM Settings

DOM 설정은 이 모듈이 DOM과 어떻게 인터페이스할지 지정해요.

설정	기본값	설명
namespace	progress	이벤트 네임스페이스예요.
text	{ active:false, error:false, success:false, warning:false, percent:'{percent}%', ratio:'{value} of {total}', bars:[] }	각 상태의 텍스트 콘텐츠로, {percent}, {value}, {total}, {bar} 간단 템플릿을 사용해요. {bar}는 여러 막대에서 막대 이름을 표시하는 데 유용해요. 막대 이름은 text.bars가 문자열 배열 형태로 제공해요. 예: ['bar1', 'bar2'].
regExp	{ variable: /\{\$*[A-z0-9]+\}/g }	모듈이 사용하는 정규식이에요.
selector	{ bar : '> .bar', label : '> .label', progress : '.bar > .progress' }	모듈이 사용하는 선택자예요.
metadata	{ percent : 'percent', total : 'total', value : 'value' }	모듈이 사용하는 DOM 메타데이터예요.
className	{ active : 'active', error : 'error', success : 'success', warning : 'warning' }	상태에 스타일을 연결하는 데 사용되는 클래스 이름이에요.

Debug Settings

Debug 설정은 콘솔에 대한 디버그 출력을 제어해요.

설정	기본값	설명
name	Progress	디버그 로그에 사용되는 이름이에요.
silent	false	모든 콘솔 출력을 조용히 만들어요.
debug	false	콘솔에 표준 디버그 출력을 제공해요.
performance	true	콘솔에 표준 디버그 출력을 제공해요.
verbose	false	콘솔에 보조 디버그 출력을 제공해요.
errors	{ method:'The method you called is not defined.', nonNumeric:'Progress value is non numeric', tooHigh:'Value specified is above 100%', tooLow:'Value specified is below 0%' }	오류 메시지 설정이에요.

더 알아보기 (Learn more)

프로그레스로 로딩 상태나 작업 진행률을 시각화할 수 있어요. total/value로 비율을 계산하고 템플릿 토큰으로 라벨을 꾸며 보세요. 로딩 요소는 Loader 문서도 함께 참고하세요.