0%
이전 시간에 다루었던 JQuery를 활용하여 다음 코드를 제작했습니다.
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Progressbar Using jQuery</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var i = 0;
$("button").click(function(){
if (i == 0) {
i = 1;
var elem = $("#progressbar").css("width") ;
var mold = $("#progressbarMold").css("width") ;
var maxWidth = parseInt(mold.substring(0, mold.length-2)) ;
var width = parseInt(elem.substring(0, elem.length-2));
var id = setInterval(frame, 10);
function frame() {
if (width >= maxWidth) {
clearInterval(id);
i = 0;
} else {
width += 1 ;
$("#progressbarMold div").css("width", width/maxWidth*100 + "%");
$("#progressbarMold p").text(Math.floor(width/maxWidth*100) + "%") ;
}
} ;
}
});
});
</script>
<style>
button{
background-color: lightgray;
color: black;
padding: 10px;
font-size: 15px;
border-radius: 10px;
border-color: none;
}
button:hover{
background-color: rgb(177, 150, 177);
color: black;
}
#progressbar, #progressbarMold {
border-radius: 10px;
height: 30px;
}
#progressbar {
width: 0%;
background-color: rgb(184, 235, 250);
}
#progressbarMold {
margin-left: 10%;
width: 80% ;
border: 5px solid black;
}
#progressbarMold p{
position: absolute;
width: 80%;
top: -1px;
color: gray;
text-align: center;
}
</style>
</head>
<body>
<div id="progressbarMold"><div id="progressbar"></div><p>0%</p></div><br>
<div id="box">
<button id="downloadButton">Start Downloading</button>
</div>
</body></html>
