/*Normal loading*/
.loading {
position: relative;
height: 110px;
}
.loading > * {
visibility: hidden;
display: none;
}
.loading::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
animation: FadeIn 0.5s;
}
.loading.loading-content > * {
visibility: visible;
}
/*Small Normal loading*/
.loading-small {
position: relative;
height: 38px;
}
.loading-small > * {
visibility: hidden;
display: none;
}
.loading-small::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
animation: FadeIn 0.5s;
}
.loading-small.loading-content > * {
visibility: visible;
}
/*centerlized loading*/
.loading-center {
position: relative;
height: 100%;
}
.loading-center > * {
visibility: hidden;
display: none;
}
.loading-center::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
animation: FadeIn 0.5s;
}
.loading-center.loading-content > * {
visibility: visible;
}
/* No-height loading */
.loading-noheight {
position: relative;
}
.loading-noheight > * {
visibility: hidden;
content: "";
display: none;
}
#addtocart.loading-noheight {
content: "";
font-size: 0px !important;
}
.loading-noheight::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
animation: FadeIn 0.5s;
}
.loading-noheight.loading-content > * {
visibility: visible;
}
/* loading-product */
.loading-product {
position: relative;
content: "";
font-size: 0px !important;
}
.pcard .loading-product::after {
content: "";
}
.loading-product > * {
visibility: hidden;
display: none;
font-size: 0px;
}
.loading-product::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
animation: FadeIn 0.5s;
}
.loading-product.loading-content > * {
visibility: visible;
}
/*loading no hide*/
.loading-nohide {
position: relative;
}
.loading-nohide > * {
visibility: visible;
}
.loading-nohide::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
animation: FadeIn 0.2s;
}
.loading-nohide::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; /* Ensure the loading animation is on top of the overlay */
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
}
.loading-nohide.loading-content > * {
visibility: visible;
}
.loading-nohide-builder {
position: relative;
height: 100vh;
}
.loading-cart {
position: relative;
}
.loading-cart > * {
visibility: visible;
}
.loading-cart::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
animation: FadeIn 0.2s;
}
.loading-cart::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; /* Ensure the loading animation is on top of the overlay */
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
}
.loading-cart.loading-content > * {
visibility: visible;
}
.loading-nohide-builder {
position: relative;
height: 100vh;
}
.loading-nohide-builder > * {
visibility: visible;
}
.loading-nohide-builder::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
animation: FadeIn 0.2s;
}
.loading-nohide-builder::after {
content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2; /* Ensure the loading animation is on top of the overlay */
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
}
.loading-nohide-builder.loading-content > * {
visibility: visible;
}
.loading-builder {
position: relative;
height: 100vh;
}
.loading-builder > * {
visibility: visible;
display: none;
}
.loading-builder::before {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(255,255,255,0);
}
.loading-builder::after {
content: '';
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
z-index: 2;
background: transparent url('/img/logo2.png') no-repeat center;
background-size: contain;
animation: LoadingPulse 1s infinite;
}
.loading-builder .loading-progress-container {
display: block !important;
visibility: visible !important;
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, calc(-50% + 100px));
z-index: 3;
width: 250px;
}
.loading-progress-bar {
width: 100%;
height: 10px;
background-color: #2D2D2D;
border-radius: 5px;
overflow: hidden;
box-shadow: 2px 2px 10px rgba(0,0,0,0.65), inset 0 0 10px rgba(0,0,0,0.5);
}
.loading-progress-fill {
height: 100%;
background: linear-gradient(90deg, #00ff88 0%, #FF9600 25%, #FFFE00 50%, #00CBFF 75%, #00ff88 100%);
background-size: 200% 100%;
width: 0%;
transition: width 0.10s ease;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 255, 136, 0.5), 0 0 20px rgba(136, 0, 255, 0.3);
animation: rgbFlow 1.5s linear infinite;
}
/* Pulse effect when progress updates */
.loading-progress-fill.progress-pulse {
animation: rgbFlow 1.5s linear infinite, progressPulse 0.3s ease-out;
}
.loading-progress-text {
text-align: center;
margin-top: 15px;
font-size: 14px;
color: #fff;
font-weight: 600;
text-shadow: 0 0 10px rgba(0, 255, 136, 0.8), 0 0 20px rgba(136, 0, 255, 0.6), 0 2px 5px rgba(0, 0, 0, 0.8);
letter-spacing: 0.5px;
transition: transform 0.1s ease;
}
/* Pop animation for text */
.loading-progress-text.text-pop {
animation: textPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.loading-builder.loading-content > * {
visibility: visible;
}
/* ============= ANIMATIONS ============= */
@keyframes LoadingPulse {
0% {
opacity: 0.7;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}
100% {
opacity: 0.7;
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes rgbFlow {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
@keyframes progressPulse {
0% {
box-shadow: 0 0 10px rgba(0, 255, 136, 0.5), 0 0 20px rgba(136, 0, 255, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(0, 255, 136, 1), 0 0 40px rgba(136, 0, 255, 0.8), 0 0 60px rgba(255, 0, 255, 0.6);
}
100% {
box-shadow: 0 0 10px rgba(0, 255, 136, 0.5), 0 0 20px rgba(136, 0, 255, 0.3);
}
}
@keyframes textPop {
0% {
transform: scale(1);
text-shadow: 0 0 10px rgba(0, 255, 136, 0.8), 0 0 20px rgba(136, 0, 255, 0.6), 0 2px 5px rgba(0, 0, 0, 0.8);
}
40% {
transform: scale(1.10);
text-shadow: 0 0 20px rgba(0, 255, 136, 1), 0 0 40px rgba(136, 0, 255, 1), 0 0 60px rgba(255, 0, 255, 0.8), 0 2px 10px rgba(0, 0, 0, 1);
}
100% {
transform: scale(1);
text-shadow: 0 0 10px rgba(0, 255, 136, 0.8), 0 0 20px rgba(136, 0, 255, 0.6), 0 2px 5px rgba(0, 0, 0, 0.8);
}
}
.FadeIn {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}