<style lang="scss" scoped>
@mixin skeleton-ani {
0% {
left: 0
}
to {
left: 100%
}
}
@-webkit-keyframes ani {
@include skeleton-ani;
}
@keyframes ani {
@include skeleton-ani;
}
.skt-loading {
.skeleton {
display: inline-block;
position: relative;
overflow: hidden ;
border: none !important;
background-color: rgba(0, 0, 0, 0) !important;
background-image: none !important;
pointer-events: none;
list-style: none;
&:after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: #eaedf8;
display: block;
border-radius: 10px;
}
&:before {
content: "";
position: absolute;
top: 0;
width: 30%;
height: 100%;
background: linear-gradient(left top,rgba(238, 243, 248, 1.0),rgba(238, 243, 248,.5));
-webkit-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
transform: skewX(-45deg);
z-index: 99;
animation: ani 5s ease infinite;
display: block;
}
}
}
</style>
效果,数据加载完就可以去除这个样式 让用户体验可以好点,根据Let dreams fly稍微改动