css实现骨架屏

<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稍微改动