맨위로가기
 

SBUx

닫기

2.18 프로그래스바로 특정실행 종료시까지 로딩바 나타내기

STEP 1. progress 컴포넌트 생성

1. uitype 속성을 bar로 설정하여 컴포넌트를 생성합니다. 
<sbux-progress id="sbIdx1_1" name="sbTagNm1_1" uitype="bar">
    <progress-bar>
       <bar valuenow="0"></bar>
    </progress-bar>
</sbux-progress>
2. indicator-type 속성을 추가합니다. 
<sbux-progress id="sbIdx1_1" name="sbTagNm1_1" uitype="bar" indicator-type="load">
    <progress-bar>
       <bar valuenow="0"></bar>
    </progress-bar>
</sbux-progress>
3. show-openlayer 속성을 추가합니다. 
<sbux-progress id="sbIdx1_1" name="sbTagNm1_1" uitype="bar" indicator-type="load" show-openlayer="true">
    <progress-bar>
       <bar valuenow="0"></bar>
    </progress-bar>
</sbux-progress>

STEP 2. promiseProgress Method 설정

2. promiseProgress 메소드를 실행 하기 위한 function을 추가합니다. 
<script>
    function blockingFunc(){
        alert('blockingFunc() processed');
    });
</script>
<input type="button" value="openProgress" onclick="SBUxMethod.promiseProgress('progNm', blockingFunc, 10000)">
<sbux-progress id="sbIdx1_1" name="sbTagNm1_1" uitype="bar" indicator-type="load" show-openlayer="true">
    <progress-bar>
       <bar valuenow="0"></bar>
    </progress-bar>
</sbux-progress>