Как сделать так, чтобы CSS загрузчик работал гладко и бесперебойно?

Question

У меня на сайте есть анимация загрузки CSS SVG: https://www.gray.fish. Однако он не работает гладко и иногда пропускает кадры.

Как это исправить?

Используемый код:

window.addEventListener("load", function(){
  document.getElementById("main").style.display = "none";
  document.getElementById("header").style.display = "none";
  document.getElementById("contact").style.display = "none";
  document.getElementById("cookiePopup").style.display = "none";
  document.getElementById("cookieButton").style.display = "none";
  document.getElementById("body").style.overflowY = "hidden";
  document.getElementById("menu").style.display = "none";
  var load_screen = document.getElementById("loadscreen");
  var i = 10;
  var load = document.getElementById("loadscreen");
  load.style.opacity = 1;
  load.style.zIndex = 99999999999;
  var k = window.setInterval(function() {
    if (i <= 0) {
      clearInterval(k);
        document.body.removeChild(load_screen);
        document.getElementById("main").style.display = "block";
        document.getElementById("header").style.display = "block";
        document.getElementById("contact").style.display = "block";
        document.getElementById("cookiePopup").style.display = "block";
        document.getElementById("cookieButton").style.display = "block";
        document.getElementById("menu").style.display = "inline-block";
        document.getElementById("body").style.overflowY = "scroll";

        fadeIn();
    } else {
      load.style.opacity = i / 10;
      i--;
    }
  }, 50);
});

.st2{
  stroke-dasharray: 2000; 
  opacity: 1;
  animation: animate 3s infinite;
}

@keyframes animate{
  0% {
    opacity: 10;
    fill: none;
    stroke-dashoffset: 500;
  }

  50%{
    stroke-dashoffset: 6000;
  }

  100%{
    stroke-dashoffset: 500;
  }
}

<div id="loadscreen"><div id="loader">

  <?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
<style type="text/css">
  .st0{display:none;}
  .st1{display:inline;fill:#FFFFFF;}
  .st2{fill:none;stroke:#969696;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g id="Layer_2" class="st0">
  <rect class="st1" width="2000" height="2000"/>
</g>
<g id="Layer_1">
  <path class="st2" d="M1803.2,961.6l-626.1-626.1c-21.2-21.2-55.5-21.2-76.7,0L533.6,902.4l-260-260c-34.2-34.2-92.6-10-92.6,38.4
    v638.5c0,48.3,58.4,72.5,92.6,38.4l260-260l566.8,566.8c21.2,21.2,55.5,21.2,76.7,0l626.1-626.1
    C1824.3,1017.2,1824.3,982.8,1803.2,961.6z M1051.4,1190.8c0,48.3-58.4,72.5-92.6,38.4l-0.5-0.5c-21.2-21.2-21.2-55.5,0-76.7
    l0.5-0.5c34.2-34.2,92.6-10,92.6,38.4V1190.8z"/>
</g>
</svg></div></div>
```

Заранее благодарен за любую помощь.

Я попытался свернуть код, и проблема иногда исчезает, но затем волшебным образом возвращается ...