File Manager

Editing:skeleton.css

.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);
  /* gallery */
  background-size: 100% 100%;
  /* gallery */
  background-position: left 0;
  /* gallery */
}
.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)), /* gallery */ -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), /* title */ -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), /* price */ -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), /* sku */ -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), /* category */ -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), /* tags */ -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)), /* excerpt */ -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)) /* cart */;
  background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), /* gallery */ linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), /* title */ linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), /* price */ linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), /* sku */ linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), /* category */ linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), /* tags */ 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), /* excerpt */ linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0) /* cart */;
  background-size: 100% 450px, /* gallery */ 60% 20px, /* title */ 20% 15px, /* price */ 27% 15px, /* sku */ 45% 15px, /* category */ 35% 15px, /* tags */ 195% 15px, 65% 15px, 85% 15px, 30% 15px, /* excerpt */ 40% 40px /* cart */;
  background-position: left 15px, /* gallery */ left 480px, /* title */ left 515px, /* price */ left 545px, /* sku */ left 575px, /* category */ left 605px, /* tags */ left 635px, left 665px, left 695px, left 725px, /* excerpt */ left 770px /* cart */;
}
.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)), /* title */ -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), /* price */ -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), /* sku */ -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), /* category */ -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)), /* tags */ -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)), /* excerpt */ -webkit-gradient(linear, left top, left bottom, color-stop(100%, var(--linear-gradient, #f4f4f4)), color-stop(0, transparent)) /* cart */;
  background-image: linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), /* title */ linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), /* price */ linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), /* sku */ linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), /* category */ linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0), /* tags */ 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), /* excerpt */ linear-gradient(var(--linear-gradient, #f4f4f4) 100%, transparent 0) /* cart */;
  background-size: 60% 20px, /* title */ 20% 15px, /* price */ 27% 15px, /* sku */ 45% 15px, /* category */ 35% 15px, /* tags */ 195% 15px, 65% 15px, 85% 15px, 30% 15px, /* excerpt */ 40% 40px /* cart */;
  background-position: left 15px, /* title */ left 50px, /* price */ left 80px, /* sku */ left 110px, /* category */ left 140px, /* tags */ left 170px, left 200px, left 230px, left 260px, /* excerpt */ left 290px /* cart */;
}
.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;
  }
}

Cancel

🤩 File Manager - Mr.X

Editing:skeleton.css