Custom Music Player (5) 음악 progress bar

이 포스트는 Udemy 20 Web Projects With Vanila Javascript 보고 정리하는 내용입니다

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

20 Web Projects With Vanilla JavaScript

 

 

 

 

/* progress */
.progress-container {
  background: #fff;
  height: 4px;
  width: 100%;
  border-radius: 5px;
  margin: 10px 0;
  cursor: pointer;
}

.progress {
  background: #fe8daa;
  border-radius: 5px;
  height: 100%;
  width: 0%;
  transition: width 0.1s linear;
}

 

container에 

height:4px

width:100%

 

progress에는

height:100%주고

width:0% (나중에 javascript로 % 늘려줄 것임)

근데 자연스럽게 하려고

transition: width 0.1s linear 준다.