// Lower code add to "Design system" component
// ---
@keyframes idm-skeleton-loading {
  to {
    background-position-x: -200%;
  }
}

.skeleton(@width, @height, @mobileWidth, @mobileHeight, @borderRadius) {
  position: relative;
  overflow: hidden;

  &.idm-loading {
    transition: none;
    border-radius: @borderRadius;
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: 1.5s idm-skeleton-loading linear infinite;
    width: @width;
    height: @height;
    
    @media (max-width: 756px) {
      width: @mobileWidth;
      height: @mobileHeight;
    }
  }
}
// ---

// Example of use
.wrapper {
  .element {
   .skeleton(100%, 50vh, 300px, 100px, 3rem);
  }
}