Прелоадер с заполнением и счетчиком

<style>
.uc-tistols-pre01 {
position: absolute;
width: 100%;
left:0;
top: 0;
z-index: 9999;
transition:all 2s ease;
}
.prel {
position: fixed;
z-index: 9999;
}
.hide {
top:-100%;
}
.pre01-num {
mix-blend-mode: difference;
}
.t-body {
overflow: hidden
}
.tistols-pre01progress .tn-atom {
background-color:#010101!important; /*цвет шейпа для заполнения*/
}
.pre01-num .tn-atom {
color:#E1FC52!important; /*цвет текста (такой же, как фон)*/
}
.uc-tistols-pre01 .t396__artboard {
background-color:#E1FC52!important; /*цвет фона*/
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/CustomEase.min.js"></script>

<script>
var body = $('.t-body')
body.addClass('diss')
var block = $('.uc-tistols-pre01');
block.addClass('prel');
var bar = $('.tistols-pre01progress')
// variables
let customEase =
"M0,0,C0,0,0.13,0.34,0.238,0.442,0.305,0.506,0.322,0.514,0.396,0.54,0.478,0.568,0.468,0.56,0.522,0.584,0.572,0.606,0.61,0.719,0.714,0.826,0.798,0.912,1,1,1,1";
let counter = {
value: 0
};
let loaderDuration = 3;

if (sessionStorage.getItem("visited") !== null) {
loaderDuration = 5;
counter = {
value: 0
};
}
sessionStorage.setItem("visited", "true");

function updateLoaderText() {
let progress = Math.round(counter.value);
$(".pre01-num .tn-atom").text(progress);
}
function endLoaderAnimation() {
block.removeClass('prel');
block.addClass('hide');
body.css('overflow','visible');
}

let tl = gsap.timeline({
onComplete: endLoaderAnimation
});

tl.to(counter, {
value: 100,
onUpdate: updateLoaderText,
duration: loaderDuration,
ease: CustomEase.create("custom", customEase)
});
tl.to(bar, {
width: "100%",
duration: loaderDuration,
ease: CustomEase.create("custom", customEase)
}, 0);
</script>