<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Progress Bar</title>
<style>
#myProgress {
    width:400px;
    background-color:#ddd;
}

#myBar {
    width:400px;
    height:30px;
    background-color:#4CAF50;
}
</style>
</head>
<body>

<h2>타이머 Progress 진행바 예제</h2>

<div id="myProgress">
    <div id="myBar"></div>
</div>

<div id="digit"></div>

<br><br>
<button onclick="start()">시작하기</button>

<script>
var i = 400;
function start() {
    if (i == 400)
    {
        i = 400;
        var digit = document.getElementById("digit");

        var elem = document.getElementById("myBar");
        var width = 400;
        var id = setInterval(frame,1000);
        function frame() {
            if (width <= 0) {
                clearInterval(id);
                i=14;
                digit.innerHTML = width + "초";

                alert("완료되었습니다.");
            } else {
                digit.innerHTML = width/40 + "초";

                width-=40;
                elem.style.width = width + "px";

            }
        }
    }
}
</script>
</body>
</html>
