Component

ProgressBar

Basic

프로그레스바는 작업의 진행 상태를 시각적으로 표현할 때 사용하는 컴포넌트입니다. class="Progressbar"

기본 Progressbar

<div class="Progressbar"></div>

텍스트가 있는 ProgressBar

프로그래스바 내부에 텍스트가 있는 ProgressBar 입니다.
샘플 코드처럼 Progress-text 클래스를 추가하여 사용하셔야 합니다.
진행률(%)이 텍스트로 보여집니다.
data-starttext, data-endtext 속성으로 시작 텍스트와 종료 텍스트를 지정할 수 있습니다.

<div class="Progressbar Progress-text"></div>

부모영역에 특정 스타일이 적용 된 ProgressBar

프로그래스바 상위 부모 영역에 float:right or left 또는 display:inline-block 스타일이 적용되어있는 ProgressBar 입니다.
이 구조의 경우, 샘플 코드처럼 부모 영역에 width 값을 설정하여 사용하셔야 합니다.

<div style="display:inline-block;width:100%">
	<div class="Progressbar Progress-text" data-default="60"></div>
</div>

Attributes

data-default

"10" | "20" | "30" | ...
- 프로그래스바의 초기값을 설정합니다.

<div class="Progressbar" data-default="60"></div>

data-starttext, data-endtext 2.3.1.16+

{string}
- 이 속성은 Progress-text 클래스와 함께 사용해야 합니다.
- 프로그래스바 시작 텍스트와 종료 텍스트를 속성값으로 지정하실 수 있습니다.

<div class="Progressbar Progress-text" data-starttext="start" data-endtext="end"></div>
<div class="Progressbar Progress-text Margin-top-10" data-starttext="start" data-endtext="end" data-default="100"></div>

Options 3.0.0+

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

Functions

.getOptions() 3.0.0+

Progressbar에 설정된 옵션값을 모두 가져올 수 있습니다.

Return {object}
- object
  - Progressbar에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.

//Progressbar에 설정된 모든옵션값을 가져옵니다.
$('#Progressbar').getOptions();

.getValue()

진행된 프로그래스바의 백분율 값을 가져오는 함수입니다.

return
- value {String}
  - 진행된 프로그래스바의 백분율 값

.setValue(value)

프로그래스바의 백분율 값을 세팅해주는 함수입니다.

parameter
- value {String|Number} Required
  - 설정된 값에 따라 프로그래스바 상태가 바뀝니다.

<button id="btn_setValue_30" class="Button">Set Value 30%</button>
<button id="btn_setValue_50" class="Button Margin-left-10">Set Value 50%</button>
<button id="btn_setValue_100" class="Button Margin-left-10">Set Value 100%</button>
<button id="btn_getValue" class="Button Float-right">Get Value</button>
<div id="progressbarId" class="Progressbar Margin-top-10"></div>

$('#btn_setValue_30').on('click', function() {
	$('#progressbarId').setValue(30);
});
$('#btn_setValue_50').on('click', function() {
	$('#progressbarId').setValue(50);
});
$('#btn_setValue_100').on('click', function() {
	$('#progressbarId').setValue(100);
});
$('#btn_getValue').on('click', function() {
	alert($('#progressbarId').getValue());
});

.setOptions(options)

프로그래스바의 옵션기능을 사용할 때 세팅하는 값입니다.

Button에 설정된 옵션값을 모두 가져올 수 있습니다. 3.0.0+

parameter
- options
  - bgColor {string} Optional
    - 프로그래스바의 색을 지정합니다. ex)'blue'|'red'|'#000000'..
  - bgUrl {string} Optional
    - 프로그래스바에 이미지를 삽입할 때 사용합니다.
  - showText {boolean} Optional
    - 프로그래스바의 내부 텍스트를 표현할 때 사용합니다. ex)true|false
    - showText값이 true일때 아래의 옵션을 사용합니다.
  - textColor {string} Optional
    - 프로그래스바 텍스트 색을 지정할 때 사용합니다.
  - textArray {array[]} Optional
    - 프로그레스 바 시작 텍스트와 종료 텍스트를 지정할 때 사용합니다. ex) ['start', 'end']

<button id="setBgColor" class="Button">set bgColor </button>
<button id="setTextColor" class="Button">set textColor </button>
<button id="setValue0" class="Button">set Value(0) </button>
<button id="setValue70" class="Button">set Value(70) </button>
<button id="setValue100" class="Button">set Value(100) </button>
<button id="setText" class="Button">setOptions (textArray:["start","end"])</button>
<div id="progressbarId_setOptions" class="Progressbar Progress-text Margin-top-10" data-default="30"></div>

$('#setBgColor').on('click', function() {
	$('#progressbarId_setOptions').setOptions( {
		bgColor : '#' + Math.floor(Math.random() * 1004).toString(16)
	});    
});

$('#setTextColor').on('click', function() {    
	$('#progressbarId_setOptions').setOptions( {
		textColor : '#' + Math.floor(Math.random() * 1004).toString(16)
	});
});

$('#setValue0').on('click', function() {
	$('#progressbarId_setOptions').setValue(0);
});

$('#setValue70').on('click', function() {
	$('#progressbarId_setOptions').setValue(70);
});

$('#setValue100').on('click', function() {
	$('#progressbarId_setOptions').setValue(100);
});

$('#setText').on('click', function() {
	$('#progressbarId_setOptions').setOptions({
		textArray : ["start", "end"]
	});
});

Extra Example

Status

Status : 0% completed..

<button id="btn0" data-type="button">진행</button> 
<button id="btn1" data-type="button" data-disabled="true">멈춤</button> 
<button id="btn2" data-type="button">초기화</button> 
<div id="progId" class="Progressbar Margin-top-10"></div>
<span>Status : </span>
<span id="textId" style="color:red;">0%</span>
<span> completed..</span>

$('#btn0').on('click', function () {
	window._progresstest = true;
	setTimeout(updateProgressbar, 100);
	$('#btn0').setEnabled(false);
	$('#btn1').setEnabled(true);
});

$('#btn1').on('click', function () {
	window._progresstest = false;
	$('#btn0').setEnabled(true);
	$('#btn1').setEnabled(false);
});

$('#btn2').on('click', function () {
	window._progresstest = false;
	$('#progId').setValue(0);
	$('#textId').text($('#progId').getValue() + '%');
	$('#btn0').setEnabled(true);
	$('#btn1').setEnabled(false);
});

function updateProgressbar() {
	if (!window._progresstest) {
		return;
	}
	var value = $('#progId').getValue();
	if (value == 100) {
		return;
	}
	$('#progId').setValue(value + 1);
	$('#textId').text($('#progId').getValue() + '%');
	if (value < 99) {
		setTimeout(updateProgressbar, 100);
	} else {
		$('#btn1').setEnabled(false);
	}
}

본문 상단으로 이동