Javascript trigger (progressbar) when on screen

i am currently making my own 1-page portfolio website for school and i had this cool idea that i want to show how far ive become in some coding languages by using a progressbar, for example, c# = 60% and that would be 60% of a circle. i think i can do that bu using the internet but i would like it to start / end at 60 when i'm scrolling down and it should start the progressbar when it is on screen. i do not know and cannot find on how to trigger the code when the (in this case progressbar) is visible on screen.

note: i am a fairly new javascript programmer and a fairly new user so please explain if i did something wrong.

Here is a working example of triggering an animation when you scroll to 75% of an image's height using the Intersection Observer API:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const images = document.querySelectorAll('.animate-me');

const config = {
  root: null, // viewport
  rootMargin: '0px',
  threshold: 0.75
};

let observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.intersectionRatio >= config.threshold) {
      entry.target.classList.add("active");
    }
  });
}, config);

images.forEach(image => {
  observer.observe(image);
});

<!-- language: lang-css -->

.spacer {
  height: 400px;
}

.animate-me.active {
  animation: anim1 .7s ease-out;
}

@keyframes anim1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<!-- language: lang-html -->

<div class="spacer">(Scroll down)</div>
<img src="https://picsum.photos/200" class="animate-me">
<div class="spacer"></div>

<!-- end snippet -->

You should be able to translate this to your own use case, but please share more specifics if you are looking for something else.