gsap) progress bar vertical (프로그레스 바 세로)

HTML

<progress value="20" max="100"></progress>

progress 태그는 진행의 정도를 나타내는 바를 만드는 태그입니다.

주요 속성은 value와 max 입니다.

max를 전체로 봤을 때 value에 해당하는 정도를 나타냅니다.

CSS

progress {
  position:fixed; 
  top:0; left:0; 
  width: 100vh; 
  height:6px; 
  appearance:none; 
  transform:translate(calc(-50% + 3px), calc(50vh - 50%)) rotate(90deg);
}

/* progress 배경 */
progress::-webkit-progress-bar {
  background: transparent;
}

/* progress 진행바 색상 */
progress::-webkit-progress-value {
  background: #00b596;
}

내가 원하는 progress bar는 세로형이기 때문에 progress 태그에 transform을 주어 세로로 나오게 하였다

JS

gsap.registerPlugin(ScrollTrigger);

gsap.to('progress', {
  value: 100,
  ease: 'none',
  scrollTrigger: {
    //  process bar 반응속도
    scrub: 0.3 
  }
});

 

 

 

참고사이트

https://www.codingfactory.net/11010

HTML / progress - 진행 정도 나타내는 바 만드는 태그

https://codepen.io/arnedecant/pen/OeZJqQ?editors=0110 

Scroll progress [vertical]

https://codepen.io/Mamboleoo/pen/abdwYaJ

Scroll progress & gsap ScrollTrigger