.skeleton-body {
--linear-gradient: #f4f4f4;
--linear-gradient-overlay: rgba(255, 255, 255, 0);
--linear-gradient-overlay-2: rgba(255, 255, 255, 0.8);
}
.skeleton-body.et-popup,
.skeleton-body.popup-added-to-cart-content {
overflow: hidden;
}
.skeleton-body > .et-popup-content:empty {
min-height: 350px;
}
.skeleton-body > .et-mini-content:empty:before,
.skeleton-body > .et-popup-content:empty:before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 15px;
background-repeat: no-repeat;
}
.skeleton-body > .et-mini-content:empty,
.skeleton-body .product-content {
overflow: hidden;
}
.skeleton-body.popup-added-to-cart-content:after,
.skeleton-body > .et-mini-content:empty:after,
.skeleton-body .product-content:after,
.skeleton-body.et-popup > div:empty:after {
content: '';
position: absolute;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0))), color-stop(50%, var(--linear-gradient-overlay-2, rgba(255, 255, 255, 0.8))), color-stop(80%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0))));
background-image: linear-gradient(90deg, var(--linear-gradient-overlay, rgba(255, 255, 255, 0)) 20%, var(--linear-gradient-overlay-2, rgba(255, 255, 255, 0.8)) 50%, var(--linear-gradient-overlay, rgba(255, 255, 255, 0)) 80%);
background-size: 60% 100%;
background-position: -100% 0;
background-repeat: no-repeat;
-webkit-animation: skeletonloading 1.5s infinite 0.2s;
animation: skeletonloading 1.5s infinite 0.2s;
z-index: 1;
}
.skeleton-body .product-images:empty:before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 15px;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent));
background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0); background-size: 100% 100%; background-position: left 0; }
.skeleton-body.product > div:empty:before,
.skeleton-body .product-information:empty:before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 15px;
background-repeat: no-repeat;
}
.skeleton-body.product > div:empty:before {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)) ;
background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0) ;
background-size: 100% 450px, 60% 20px, 20% 15px, 27% 15px, 45% 15px, 35% 15px, 195% 15px, 65% 15px, 85% 15px, 30% 15px, 40% 40px ;
background-position: left 15px, left 480px, left 515px, left 545px, left 575px, left 605px, left 635px, left 665px, left 695px, left 725px, left 770px ;
}
.skeleton-body .product-information:empty:before {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)) ;
background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0) ;
background-size: 60% 20px, 20% 15px, 27% 15px, 45% 15px, 35% 15px, 195% 15px, 65% 15px, 85% 15px, 30% 15px, 40% 40px ;
background-position: left 15px, left 50px, left 80px, left 110px, left 140px, left 170px, left 200px, left 230px, left 260px, left 290px ;
}
.skeleton-body.et-popup > div:empty:before {
min-height: 500px;
display: block;
width: 100%;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent));
background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0);
background-size: 50% 20px,
40% 20px,
55% 20px,
35% 20px,
45% 20px,
50% 20px,
40% 20px,
45% 20px,
55% 20px,
35% 20px;
background-position: center 20px,
center 50px,
center 80px,
center 110px,
center 140px,
center 170px,
center 200px,
center 230px,
center 260px,
center 290px;
margin: 0;
}
.skeleton-body.popup-added-to-cart-content {
background-color: var(--et_white-2-dark);
}
.skeleton-body.popup-added-to-cart-content .product-section-01 {
min-height: 190px;
}
.skeleton-body.popup-added-to-cart-content .product-section-01 .product-name {
min-height: inherit;
margin-bottom: 15px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent));
background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0);
background-position: left 15px;
background-repeat: no-repeat;
background-size: calc(100% - 15px);
}
.skeleton-body.popup-added-to-cart-content .product-section-01 .product-details {
min-height: inherit;
margin-bottom: 15px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent));
background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0);
background-size: 30% 25px, 20% 20px, 20% 20px, 15% 34px;
background-position: left 15px, left 55px, left 85px, left 125px;
background-repeat: no-repeat;
}
.skeleton-body.popup-added-to-cart-content .product-section-01 .order-total {
min-height: 70px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent));
background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0);
background-size: 20% 30px, 15% 30px;
background-position: left 20px, right 20px;
background-repeat: no-repeat;
}
.skeleton-body.popup-added-to-cart-content .product-section-02 {
min-height: 60px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent));
background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0);
background-size: calc(33.33% - 5px) 40px, calc(33.33% - 5px) 40px, calc(33.33% - 5px) 40px;
background-position: left 15px, center 15px, right 15px;
background-repeat: no-repeat;
clear: both;
}
.skeleton-body.popup-added-to-cart-content .product-section-03 {
min-height: 170px;
margin: 0 -15px;
}
.skeleton-body.popup-added-to-cart-content .product-section-03 .slide-item {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent));
background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0);
background-size: 100% 50px,
25% 15px,
20% 15px,
35% 15px;
background-position: left 0px,
left 65px,
left 90px,
left 115px;
background-repeat: no-repeat;
min-height: 130px;
}
@-webkit-keyframes skeletonloading {
to {
background-position: 200% 0;
}
}
@keyframes skeletonloading {
to {
background-position: 200% 0;
}
}