[JQuery] progressTimer 프로그레스바 타이머

■ JQuery progressTimer 프로그레스바 타이머

---

■ Bootstrap 3 프레임 워크

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

■ 자바스크립트 라이브러리 및 jQuery progressTimer (+파일첨부)

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="/js/plugins/progresstimer/jquery.progresstimer.js"></script>

Ajax-Progress-Bar-Plugin-with-jQuery-Bootstrap-progressTimer.zip

0.29MB

---

■ 사용법

<div class="loading-progress"></div>

<script type="text/javascript">
	$("#progressTimer").progressTimer({
        timeLimit: 10,		
        warningThreshold: 10,
        baseStyle: 'progress-bar-warning',
        warningStyle: 'progress-bar-danger',
        completeStyle: 'progress-bar-info',
        showHtmlSpan: true,
        successText:'100% <br type="_moz">',
        onFinish: function() {
            console.log("timer expires");
        }
    });
</script>

# 기본설정

// total number of seconds
// 설정 타이머: 총 시간(초)
timeLimit: 60,

// seconds remaining triggering switch to warning color
// 경고색상으로 전환하는 남은 시간(초)
warningThreshold: 5,

// invoked once the timer expires
// 설정한 타이머 만료 시 호출
onFinish: function () {
},

// bootstrap progress bar style at the beginning of the timer
// 타이머 시작 부분의 부트 스트랩 진행률 표시 줄 스타일
baseStyle: '',

// bootstrap progress bar style in the warning phase
// 경고 단계의 부트 스트랩 진행률 표시 줄 스타일
warningStyle: 'progress-bar-danger',

// bootstrap progress bar style at completion of timer
// 타이머 완료시 부트 스트랩 진행률 표시 줄 스타일
completeStyle: 'progress-bar-success',

// show html on progress bar div area
// 진행률 표시 줄 div 영역에 진행률(%) 표시 여부 (default: true)
showHtmlSpan: true,

// error text
// 에러 시 메시지
errorText: 'ERROR!',

// set the success text when succes occurs
// 성공 시 메시지
successText: "100%"<br type="_moz">