Прелоадер v1.1

<!--Прелоадер v1.1-->
<!--https://mt-webdesign.ru/preloader-11-->
<!--Подключаем библиотеки для анимации-->
<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>
// Добавляем условия для анимаций
$(".uc-loading").addClass('hidden-loading');
$(".t-body").addClass('overflow-hidden-body');
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 = 10;
if (sessionStorage.getItem("visited") !== null) {
loaderDuration = 2;
counter = {
value: 75
};
}
sessionStorage.setItem("visited", "true");
function updateLoaderText() {
let progress = Math.round(counter.value);
$(".loader_number .tn-atom").text(progress);
}
function endLoaderAnimation() {
// Переключаем классы и меняем параметры
$(".uc-loading").addClass('animation-bg-opacity');
// Скрываем блок с прелоадером после его загрузки
setTimeout(function() {
$(".uc-loading").removeClass('hidden-loading');
$(".t-body").removeClass('overflow-hidden-body');
}, 1800);
}
let tl = gsap.timeline({
onComplete: endLoaderAnimation
});
tl.to(counter, {
value: 100,
onUpdate: updateLoaderText,
duration: loaderDuration,
ease: CustomEase.create("custom", customEase)
});
tl.to(".loader_progress", {
width: "100%",
duration: loaderDuration,
ease: CustomEase.create("custom", customEase)
}, 0);
</script>
<style>
/*Отключаем прозрачность фона на Zero блоке*/
.animation-bg-opacity .t396__artboard {
background-color: transparent !important;
}
.hidden-loading {
display: block !important;
}
/*Включаем возможность скроллить страницу, после загрузки*/
.overflow-hidden-body {
overflow: hidden !important;
max-height: 100vh !important;
}
/*Выключаем Zero-блок с прелоадером, после загрузки страницы*/
.uc-loading {
display: none;
}
.uc-loading .t396__artboard {
position: fixed;
z-index: 99999 !important;
}
</style>