Progressbar

기본 사용

<div class="gn-progressbar is-primary">
  <span class="gauge" style="width: 30%"></span>
  <span class="figure">30%</span>
</div>
<div class="gn-progressbar is-secondary">
  <span class="gauge" style="width: 90%"></span>
  <span class="figure inner">90%</span>
</div>

크기

<div class="gn-progressbar is-small">
  <span class="gauge" style="width: 30%"></span>
</div>
<div class="gn-progressbar is-normal">
  <span class="gauge" style="width: 60%"></span>
</div>
<div class="gn-progressbar is-medium">
  <span class="gauge" style="width: 90%"></span>
</div>

상태

<div class="gn-progressbar is-secondary is-indeterminate">
  <span class="gauge"></span>
</div>
<div class="gn-progressbar is-indeterminate">
  <span class="gauge"></span>
</div>

생성 옵션

  <div class="gn-container new-progress-indeterminate"></div>
  <div class="gn-container new-progress"></div>
  <button class="btnValue btn0">0%</button>
  <button class="btnValue btn20">20%</button>
  <button class="btnValue btn50">50%</button>
  <button class="btnValue btn70">70%</button>
  <button class="btnValue btn100">100%</button>

  Gn.create('progressbar', {
    target:'.new-progress-indeterminate',
    color: 'info',
    size: 'medium',
    indeterminate: true,
    hasFigure: true
  });
  Gn.create('progressbar', {
    target:'.new-progress',
    color: 'danger',
    size: 'medium',
    value: 30
  });

name		type	default	description
target		string		프로그레스바를 표시할 대상의 선택자(selector)
color		string		'success','warning','danger','info','cancel','dark','link','trans','secondary','mono'
size		string		'small','normal','medium'
value		number	0	상태 진행 정도(0~100)
hasFigure		boolean	false	상태 진행 정도 텍스트 표기여부
indeterminate		boolean	false	작업정도를 파악할 수 없는 경우 사용

메소드

name	return	description
setValue(value:number)	void	프로그레스바의 진행상태를 변경한다.(indeterminate 상태에서는 사용불가)
complete()	void	프로그레스바의 진행상태를 완료한다.