/*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::after {
content: '';
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2; /* Ensure the loading animation is on top of the overlay */
background: transparent url('/img/logo2.png') no-repeat fixed center;
animation: LoadingPulse 1s infinite;
}
.loading-builder.loading-content > * {
visibility: visible;
}
@keyframes FadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes LoadingPulse {
0% {
opacity: 0.7;
transform: scale(1) ;
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0.7;
transform: scale(1);
}
}