Прелоадер счётчик

<!--Прелоадер Счётчик-->
<!--https://mt-webdesign.ru/counter-loading-->
<div class="preloader">
<div class="preloader-bg">
<div class="panel left"></div>
<div class="panel right"></div>
<div class="divider"></div>
</div>
<div class="preloader-content">
<div class="progress-wrap">
<div class="progress-mask">
<div class="progress-numbers"></div>
</div>
</div>
</div>
</div>
<style>
:root {
/* основной цвет */
--bg-main: #d24d35;
--bg-main-rgb: 210, 77, 53;
/* текст */
--font-main: 'Inter', sans-serif;
--color-text: #fff;
--color-line: #eb745e;
--shadow-strong: rgba(var(--bg-main-rgb), 0.7);
--shadow-soft: rgba(var(--bg-main-rgb), 0.25);
/* размеры */
--progress-height: 80px;
--font-size: 80px;
}
.scale-in {
overflow: hidden !important;
}
.progress-numbers div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
pointer-events: none;
}
.progress-numbers {
text-align: center;
display: flex;
flex-direction: column;
font-size: var(--font-size);
font-family: var(--font-main);
line-height: 1;
color: var(--color-text);
pointer-events: none;
}
.preloader {
position: fixed;
inset: 0;
z-index: 9999;
overflow: hidden;
}
.preloader-bg {
position: absolute;
inset: 0;
display: flex;
}
.panel {
width: 50%;
height: 100%;
background: var(--bg-main);
}
.divider {
position: absolute;
left: 50%;
top: -100%;
width: 1px;
height: 100%;
background: var(--color-line);
transform: translateX(-50%);
}
.preloader-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
}
.progress-mask {
position: relative;
height: var(--progress-height);
overflow: hidden;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
black 15%,
black 85%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 15%,
black 85%,
transparent 100%
);
}
.progress-mask::before,
.progress-mask::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 18px;
pointer-events: none;
z-index: 3;
}
.progress-mask::before {
top: -10px;
background: linear-gradient(
to bottom,
var(--shadow-strong),
var(--shadow-soft),
transparent
);
}
.progress-mask::after {
bottom: -10px;
background: linear-gradient(
to top,
var(--shadow-strong),
var(--shadow-soft),
transparent
);
}
.thin-line {
width: 170px;
height: 2px;
background: var(--color-line);
}
</style>
<script src="https://matilda-design.ru/library/GSAP.js"></script>
<script>
let pageLoaded = false;
window.addEventListener("load", () => {
pageLoaded = true;
});
const steps = [15, 27, 38, 45, 57, 76, 99];
const rowHeight = 80;
const baseDelay = 1.7;
const numbers = document.querySelector('.progress-numbers');
const preloader = document.querySelector('.preloader');
const content = document.querySelector('.preloader-content');
gsap.set(".fade-in, .from-left, .from-right, .from-top", {
opacity: 0,
visibility: "hidden"
});
gsap.set(".from-left", { x: -200 });
gsap.set(".from-right", { x: 200 });
gsap.set(".from-top", { y: -150 });
gsap.set(".scale-in", { scale: 1, borderRadius: "0px" });
for (let i = 0; i < 100; i++) {
const div = document.createElement('div');
div.textContent = i;
numbers.appendChild(div);
}
let index = 0;
function playSteps() {
if (index >= steps.length) {
endPhase1();
return;
}
const value = steps[index];
const multiplier = pageLoaded ? 0.2 : 1;
const speed = (0.9 - index * 0.08) * multiplier;
const delay = (baseDelay - index * 0.12) * multiplier;
gsap.killTweensOf(numbers);
gsap.fromTo(numbers,
{ scaleY: 1, filter: "blur(0px)" },
{
y: -value * rowHeight,
duration: Math.max(speed, 0.15),
ease: "expo.in",
scaleY: 1.25,
filter: "blur(5px)",
onComplete: () => gsap.set(numbers, { scaleY: 1, filter: "blur(0px)" })
}
);
index++;
setTimeout(playSteps, Math.max(delay, 0.05) * 1000);
}
function endPhase1() {
gsap.to(content, {
autoAlpha: 0,
duration: 0.5,
ease: "power2.out",
onComplete: startPhase2
});
}
function startPhase2() {
const tl = gsap.timeline();
tl.to(".divider", {
opacity: 1,
top: "0%",
duration: 0.8,
ease: "power3.out"
})
.to({}, { duration: 0.2 })
.to(".panel.left", { y: "-100%", duration: 0.7, ease: "power4.inOut" }, "+=0.1")
.to([".panel.right", ".divider"], { y: "-100%", duration: 0.7, ease: "power4.inOut" }, "-=0.9")
.to(preloader, {
autoAlpha: 0,
duration: 0.6,
onComplete: () => {
preloader.remove();
runIntroAnimations();
}
});
}
function runIntroAnimations() {
const tl = gsap.timeline();
const w = window.innerWidth;
tl.set(".fade-in, .from-left, .from-right, .from-top, .scale-in", { visibility: "visible" });
if (w < 480) {
gsap.set([".from-left", ".from-right"], { x: 0 });
gsap.set(".from-top", { y: 0 });
gsap.set(".scale-in", { scale: 1 });
tl.to(".fade-in, .from-left, .from-right, .from-top, .scale-in", {
opacity: 1,
scale: 1,
duration: 0.8,
ease: "power2.out",
stagger: 0.1
});
} else {
tl.to(".fade-in", {
opacity: 1,
duration: 1,
ease: "power2.out",
stagger: 0.15
})
.to(".from-left", { x: 0, opacity: 1, duration: 1, ease: "power3.out", stagger: 0.15 }, "<")
.to(".from-right", { x: 0, opacity: 1, duration: 1, ease: "power3.out", stagger: 0.15 }, "<")
.to(".from-top", { y: 0, opacity: 1, duration: 1, ease: "power3.out", stagger: 0.15 }, "<")
.to(".scale-in", {
scale: 0.4,
borderRadius: "350px",
duration: 1,
ease: "power2.out",
stagger: 0.15
}, "<");
}
}
playSteps();
</script>