Прелоадер 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>
$(document).ready(function() {
if ($(window).width() >= 0 && $(window).width() <= 5000) {
// Добавляем условия для анимаций
$(".uc-loading").addClass('hidden-loading');
$(".t-body").addClass('overflow-hidden-body');
$('.loader_progress_bar').addClass('loader_progress');
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 = 8;
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');
$(".loader_progress_bar").addClass('loader_progress_bar_load');
$(".loader_number").addClass('loader_number_load');
$(".loader_elements").addClass('loader_number_load');
$(".loader_bg").addClass('loader_bg_load');
// Скрываем блок с прелоадером после его загрузки
setTimeout(function() {
$(".uc-loading").removeClass('hidden-loading');
$(".t-body").removeClass('overflow-hidden-body');
}, 2000);
}
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: "94%",
duration: loaderDuration,
ease: CustomEase.create("custom", customEase)
}, 0);
}
});
</script>
<style>
@media only screen and (min-width: 0px) and (max-width: 5000px) {
/*Добавляем проценты для цифр*/
.loader_number .tn-atom:after {
content: '%';
display: block;
position: absolute;
top:0;
left:100%;
}
/*Добавляем анимация для цифр*/
.loader_number, .loader_elements {
opacity: 1;
transition: opacity 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
.loader_number_load {
opacity: 0;
transition-delay: 0.5s !important;
transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
/*Добавляем анимация для нижнего шейпа(загрузки)*/
.loader_progress_bar .tn-atom {
position: relative;
transform: translateY(0%);
/*transition-delay: 0.5s !important;*/
transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.loader_progress_bar_load .tn-atom {
transform: translateY(102%) !important;
}
.loader_progress_bar {
overflow: hidden;
}
/*Добавляем анимация для верхнего шейпа(фона)*/
.loader_bg {
transition-delay: 1.3s !important;
transform: translateY(0%);
transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
.loader_bg_load {
transform: translateY(-100%);
}
/*Отключаем прозрачность фона на 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>