36 lines
763 B
Plaintext
36 lines
763 B
Plaintext
// 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);
|
|
}
|
|
} |