$gradient: linear-gradient(
  90deg,
  rgba(186, 3, 3, 1) 0%,
  rgba(234, 255, 0, 1) 25%,
  rgba(67, 195, 91, 1) 50%,
  rgba(52, 48, 148, 1) 75%,
  rgba(179, 29, 196, 1) 100%,
  rgba(255, 0, 0, 1) 100%
);

* {
  margin: 0;
  padding: 0;
}

body {
  height: 500vw;
}

h1 {
  font-size: 4vw;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.progressbar {
  &-wrapper {
    position: fixed;
    width: 100%;

    > p {
      font-size: 2.2vw;
      font-weight: bold;
    }

    &._good {
      top: 8vw;
    }

    &._bad {
      top: 18vw;
    }
  }

  left: 0;
  width: 100%;
  height: 5vw;

  > div {
    position: absolute;
    bottom: 0;
    height: 5vw;
  }

  &._good {
    background: $gradient;
    > div {
      right: 0;
      width: 100%;
      background: #999;
    }
  }

  &._bad {
    background: #999;
    > div {
      left: 0;
      width: 0;
      background: $gradient;
    }
  }
}

.scrollDown {
  position: fixed;
  bottom: 0.8vw;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  font-size: 1.8vw;
  font-weight: bold;
  animation: blink 1.5s infinite;
}

@keyframes blink {
  from {opacity: 0;}
  to {opacity: 1;}
}

window.addEventListener('DOMContentLoaded', () => {
  const goodProgressBar = document.querySelector<HTMLElement>('.js-progressbar._good > div')
  const badProgressBar = document.querySelector<HTMLElement>('.js-progressbar._bad > div')
  const pageHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight
  
  window.addEventListener('scroll', () => {
    const currentPosition = window.scrollY
    const scrolledRatio = currentPosition / pageHeight  * 100
    
    //good
    goodProgressBar!.style.width = 100 - scrolledRatio + '%'
    
    //bad
    badProgressBar!.style.width = scrolledRatio + '%'
    
    console.log(100 - scrolledRatio + '%', scrolledRatio + '%')
  })
})