JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spacer"></div>

<div class="container">

  <svg class="under" version="1.1" viewBox="0 0 200 200">
    <circle fill="none" cx="100" cy="100" r="90"/>
  </svg>

  <svg id="svg" class="svg ober" version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" xml:space="preserve">
    <circle class="ober-inner" fill="none" cx="100" cy="100" r="90"/>
  </svg>
</div>

CSS

.spacer{
  height:1500px;
}

.container{
  position: relative;
  top:20px;
  left:100px;
}

.filler-loader {
  height: 200px;
  width: 80px;
  transform: rotate(-90deg);
}

.under{
  height:200px;
  width:200px;
  position: absolute;
}

.under{
  fill: none;
  stroke: #ccc;
  stroke-linecap: butt;
  stroke-width: 20px;
}

.ober{
  width:200px;
  height:200px;
  position: absolute;
  stroke-linecap: butt;
  stroke-width:20px;
}

.ober-inner{
  stroke:black;
  stroke-dasharray: 580;
  stroke-dashoffset: 580;
}

.animate{
  animation: dash 5s linear normal forwards;
}

    @keyframes dash {
      from {
        stroke-dashoffset: 580;
      }
      to {
        stroke-dashoffset: 60;
      }
    }

JavaScript

$(window).scroll(function() {    
  var scroll = $(window).scrollTop();

  if (scroll >= 100) {
    $(".ober-inner").addClass("animate");
  }
});