[jQuery] 순차적으로 증가하는 Progressbar 구현

2015-04-02 by 편리

jQueryUI에 포함된 Progressbar 를 수정하여 순차적으로 증가하는 Progressbar 를 구현하는 방법이다. 예제는 https://jqueryui.com/progressbar/ 를 참고했으며 아래 코드와 같이 setInterval 메쏘드를 이용하여 순차적으로 증가하는 Progressbar 를 구현하였다.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>

<div id="progressbar" data-value="0"></div>

<script>
$(function() {
    var pGress = setInterval(function() {
        var pVal = parseInt($("#progressbar").data("value"));

        if(pVal > 100) {
            clearInterval(pGress);
        } else {
            pVal++;

            $("#progressbar").progressbar({
                value: pVal
            }).data("value", pVal);
        }
    }, 10);
});
</script>
</body>
</html>

데모는 http://codepub.net/jquery/progressbar.html 에서 확인할 수 있다. 위의 코드를 좀 더 수정한다면 초반에는 빨리 증가하고 후반에는 천천히 증가하는 등의 효과도 구현할 수 있지 않을까 싶다.

Leave a Reply Cancel reply