Косяк с прелоадером?

биржа трафика для сайта

Добрый день!
Пытаюсь реализовать прелоадер
нашел готовый вариант для него, скопировал css (точнее sass) и html






#loader-cnt
z-index: 100
position: absolute
height: 100vh
width: 100vw
background-color: $accent

.load
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
width: 100px
height: 100px
z-index: 10

.load hr
border: 0
margin: 0
width: 40%
height: 40%
position: absolute
border-radius: 50%
animation: spin 2s ease infinite
z-index: 100

.load :first-child
background: #19A68C
animation-delay: -1.5s
.load :nth-child(2)
background: #F63D3A
animation-delay: -1s
.load :nth-child(3)
background: #FDA543
animation-delay: -0.5s
.load :last-child
background: #193B48

@keyframes spin
0%, 100%
transform: translate(0)
25%
transform: translate(160%)
50%
transform: translate(160%, 160%)
75%
transform: translate(0, 160%)

но вот незадача!
Сам прелоадер есть, но крутиться он бесконечно, следовательно нужно вырубать его в нужный момент
jquery

document.body.onload = function() {
setTimeout(function() {
$('#loader-cnt').fadeOut('slow'); //скрываем прелоадер
$('.is-home').removeClass('before-preloader'); //описание ниже
}, 2000);
}

is-home это класс для body и я добавил к нему before-preloader, чтобы запретить скроллинг таким образом


.before-preloader
overflow: hidden
position: fixed
height: 100%
width: 100%

Все вроде хорошо, не скролит даже на мобилах, но при начале загрузки страницы скролл как будто бы смещается вниз, а потом после загрузки возвращается снова наверх и получается так, что при работе прелоадера видно кусок страницы

Вообще правильный ли у меня ход создания прелоадера? Если нет, то подскажите как будет правильно)

Помогите понять, в чем проблема? Заранее огромное спасибо!