궁금하신 점이나 고칠 부분이 있다면 언제든지 댓글 남겨주세요!

항상 웹 페이지 구현시 Scroll Progress Bar를 만들어보고 싶었다
내가 만들 프로젝트에도 한번 구현을 해보기위해서 먼저 연습할 코드를 찾아 보았다. 그리고 대충 수정해보기..

코드 찾아보기

<리액트 스크롤 프로그레스 바 구현> 링크

위의 페이지에 동영상으로도 설명이 되어있어서 금방 이해했다.
그리고 git으로 코드도 있어서 코드도 꼼꼼히 확인했다.

수정해본 코드

바꾼거라고는 색깔 밖에없음..

html {
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
}

body {
  background: #ffffff;
  padding: 5% 15%;
}

p {
  font-size: 1.8rem;
}

p:first-of-type {
  margin-top: 60px;
}

#progressBarContainer {
  position: fixed;
  z-index: 10;
  background: rgba(255, 255, 255, 0.05);
  width: 100%;
  top: 0;
  left: 0;
}

#progressBar {
  background: linear-gradient(to left, rgb(255, 166, 166), rgb(126, 197, 255));
  transform-origin: top left;
  transform: scale(0, 0);
  opacity: 0;
}

#progressBarContainer,
#progressBar {
  height: 10px;
}