CSS keyframes을 이용한 초간단 progress bar

초간단 progress bar 소스입니다.

 

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

<div class="btn">Click me!</div>

.progress-area{
  width:500px;
  height:50px;
  background:#e1e1e1;
  border:3px solid #b1b1b1;
  margin:30px;
  position:relative;
}
.progress{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}
.progress.on{
  background:#b1b1b1;
  animation:progress 3s linear;
  animation-fill-mode:forwards;
}
.btn{
  width:200px;
  height:50px;
  background:#b1b1b1;
  text-align:center;
  line-height:50px;
  margin:0 0 0 30px;
  cursor:pointer;
}
.btn:active{
  background:#ccc;
}
@keyframes progress{
  from{
    width:0;
  }to{
    width:100%;
  }
}

const btn = document.querySelector('.btn');
const progress = document.querySelector('.progress');
btn.addEventListener('click',function(event){
  progress.classList.add('on');
});