#dnxte-preloader {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity var(--dnxte-pl-fade, 500ms) ease;
} #dnxte-preloader.dnxte-preloader--hide {
opacity: 0;
} html.dnxte-preloader-active,
html.dnxte-preloader-active body {
overflow: hidden;
}
.dnxte-preloader__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.dnxte-preloader__logo {
max-width: 160px;
height: auto;
}
.dnxte-preloader__custom {
max-width: 160px;
height: auto;
}
.dnxte-preloader__text {
letter-spacing: 0.04em;
} .dnxte-preloader__steps {
transition: opacity 0.15s ease;
}
.dnxte-preloader__steps.is-swapping {
opacity: 0;
} .dnxte-pl {
--s: var(--dnxte-pl-size, 48px);
--c: var(--dnxte-pl-color, #7a5af8);
--c2: var(--dnxte-pl-color-2, #e0e0e0);
}
@keyframes dnxte-pl-spin { to { transform: rotate(360deg); } } .dnxte-pl-ring {
width: var(--s); height: var(--s);
border: calc(var(--s) / 9) solid color-mix(in srgb, var(--c) 22%, transparent);
border-top-color: var(--c);
border-radius: 50%;
animation: dnxte-pl-spin 1s linear infinite;
} .dnxte-pl-dual {
width: var(--s); height: var(--s);
border: calc(var(--s) / 9) solid transparent;
border-top-color: var(--c);
border-bottom-color: var(--c);
border-radius: 50%;
animation: dnxte-pl-spin 1.1s ease-in-out infinite;
} .dnxte-pl-dots { display: flex; gap: calc(var(--s) / 6); }
.dnxte-pl-dots span {
width: calc(var(--s) / 3.5); height: calc(var(--s) / 3.5);
background: var(--c); border-radius: 50%;
animation: dnxte-pl-bounce 0.6s ease-in-out infinite;
}
.dnxte-pl-dots span:nth-child(2) { animation-delay: 0.15s; }
.dnxte-pl-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dnxte-pl-bounce {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(calc(var(--s) / -3)); opacity: 1; }
} .dnxte-pl-pulse {
width: var(--s); height: var(--s);
background: var(--c); border-radius: 50%;
animation: dnxte-pl-pulse 1s ease-in-out infinite;
}
@keyframes dnxte-pl-pulse {
0%, 100% { transform: scale(0.5); opacity: 0.4; }
50% { transform: scale(1); opacity: 1; }
} .dnxte-pl-bars { display: flex; gap: calc(var(--s) / 9); align-items: flex-end; height: var(--s); }
.dnxte-pl-bars span {
width: calc(var(--s) / 6); height: 100%;
background: var(--c); border-radius: 3px;
animation: dnxte-pl-bars 1s ease-in-out infinite;
}
.dnxte-pl-bars span:nth-child(2) { animation-delay: 0.2s; }
.dnxte-pl-bars span:nth-child(3) { animation-delay: 0.4s; }
.dnxte-pl-bars span:nth-child(4) { animation-delay: 0.6s; }
@keyframes dnxte-pl-bars {
0%, 100% { transform: scaleY(0.3); }
50% { transform: scaleY(1); }
} .dnxte-pl-ripple { position: relative; width: var(--s); height: var(--s); }
.dnxte-pl-ripple span {
position: absolute; border: calc(var(--s) / 12) solid var(--c);
border-radius: 50%; animation: dnxte-pl-ripple 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.dnxte-pl-ripple span:nth-child(2) { animation-delay: -0.6s; }
@keyframes dnxte-pl-ripple {
0% { top: 50%; left: 50%; width: 0; height: 0; opacity: 1; }
100% { top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
} .dnxte-pl-ellipsis { position: relative; width: calc(var(--s) * 1.4); height: calc(var(--s) / 2.4); }
.dnxte-pl-ellipsis span {
position: absolute; top: 0; width: calc(var(--s) / 4.3); height: calc(var(--s) / 4.3);
border-radius: 50%; background: var(--c); animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.dnxte-pl-ellipsis span:nth-child(1) { left: 8%; animation: dnxte-pl-ell1 0.6s infinite; }
.dnxte-pl-ellipsis span:nth-child(2) { left: 8%; animation: dnxte-pl-ell2 0.6s infinite; }
.dnxte-pl-ellipsis span:nth-child(3) { left: 40%; animation: dnxte-pl-ell2 0.6s infinite; }
.dnxte-pl-ellipsis span:nth-child(4) { left: 72%; animation: dnxte-pl-ell3 0.6s infinite; }
@keyframes dnxte-pl-ell1 { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes dnxte-pl-ell3 { 0% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes dnxte-pl-ell2 { 0% { transform: translateX(0); } 100% { transform: translateX(180%); } } .dnxte-pl-flip {
width: calc(var(--s) * 0.9); height: calc(var(--s) * 0.9);
background: var(--c); animation: dnxte-pl-flip 1.2s ease-in-out infinite;
}
@keyframes dnxte-pl-flip {
0% { transform: perspective(120px) rotateX(0) rotateY(0); }
50% { transform: perspective(120px) rotateX(-180deg) rotateY(0); }
100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
} .dnxte-pl-spinner-dots { position: relative; width: var(--s); height: var(--s); animation: dnxte-pl-spin 1.4s linear infinite; }
.dnxte-pl-spinner-dots span {
position: absolute; width: calc(var(--s) / 5); height: calc(var(--s) / 5);
background: var(--c); border-radius: 50%;
}
.dnxte-pl-spinner-dots span:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.dnxte-pl-spinner-dots span:nth-child(2) { right: 0; top: 50%; transform: translateY(-50%); opacity: 0.75; }
.dnxte-pl-spinner-dots span:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0.5; }
.dnxte-pl-spinner-dots span:nth-child(4) { left: 0; top: 50%; transform: translateY(-50%); opacity: 0.25; } .dnxte-pl-heartbeat {
width: var(--s); height: var(--s);
background: var(--c); border-radius: 50%;
animation: dnxte-pl-heartbeat 1s ease infinite;
}
@keyframes dnxte-pl-heartbeat {
0% { transform: scale(0.8); } 25% { transform: scale(1); }
50% { transform: scale(0.85); } 75% { transform: scale(1.05); }
100% { transform: scale(0.8); }
} .dnxte-pl-orbit {
width: var(--s); height: var(--s);
border: calc(var(--s) / 9) solid var(--c2);
border-right-color: var(--c); border-left-color: var(--c);
border-radius: 50%;
animation: dnxte-pl-spin 0.9s linear infinite;
} .dnxte-pl-wave { display: flex; gap: calc(var(--s) / 8); }
.dnxte-pl-wave span {
width: calc(var(--s) / 4.5); height: calc(var(--s) / 4.5);
border-radius: 50%; background: var(--c);
animation: dnxte-pl-wave 1.2s ease-in-out infinite;
}
.dnxte-pl-wave span:nth-child(2) { animation-delay: 0.1s; }
.dnxte-pl-wave span:nth-child(3) { animation-delay: 0.2s; }
.dnxte-pl-wave span:nth-child(4) { animation-delay: 0.3s; }
.dnxte-pl-wave span:nth-child(5) { animation-delay: 0.4s; }
@keyframes dnxte-pl-wave {
0%, 40%, 100% { transform: scale(0.4); opacity: 0.5; }
20% { transform: scale(1); opacity: 1; }
} @media (prefers-reduced-motion: reduce) {
.dnxte-pl,
.dnxte-pl * {
animation: none !important;
}
.dnxte-pl-custom,
.dnxte-preloader__custom { animation: none !important; } .dnxte-preloader__steps { transition: none !important; }
}