<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style scoped>
body{
background: black;
text-align: ce;
}
.conatiner{
margin: 200px 50px;
background: rgb(255, 254, 254);
}
.prog{
width: 500px;
background: rgb(189, 177, 177);
}
.progs{
width: 10%;
height: 50px;
background: rgb(225, 149, 240);
color:#fff;
text-align: center;
line-height: 50px;
}
</style>
<body>
<div class="conatiner">
<h2>프로그레스 바</h2>
<div class="prog">
<div class="progs" id="progressing">5%</div>
</div>
<button onClick="moveBtn()">클릭해주세요</button>
<br>
</div>
<script>
function moveBtn(){
var ele=document.getElementById('progressing');
var width = 5;
var id =setInterval(frame, 45);
function frame(){
if(width>=100){
clearInterval(id);
}else{
width ++;
ele.style.width=width+"%";
ele.innerHTML=width+"%";
}
}
}
</script>
</body>
</html>
'Web' 카테고리의 다른 글
| 메뉴바(menubar) 만들기(HTML, CSS, JAVASCRIPT) (0) | 2020.07.15 |
|---|---|
| 간단한 DropDown(드롭다운) 메뉴 만들기(Javascript) (0) | 2020.07.14 |
