Add skeleton feature
This commit is contained in:
35
src/style.less
Normal file
35
src/style.less
Normal file
@@ -0,0 +1,35 @@
|
||||
// This part 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;
|
||||
|
||||
// Mobile adaptation
|
||||
@media (max-width: 756px) {
|
||||
width: @mobileWidth;
|
||||
height: @mobileHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Example of use
|
||||
.wrapper {
|
||||
.element {
|
||||
.skeleton(100%, 50vh, 300px, 100px, 3rem);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user