css实现骨架屏

css实现骨架屏

1.css

@-webkit-keyframes skeleton-ani {
	0% {
		left: 0
	}

	to {
		left: 100%
	}
}

@keyframes skeleton-ani {
	0% {
		left: 0
	}

	to {
		left: 100%
	}
}

.skt-loading .skeleton {
	position: relative;
	overflow: hidden;
	border: none !important;
	border-radius: 2px;
	background-color: rgba(0, 0, 0, 0) !important;
	background-image: none !important;
	pointer-events: none;
}

.skt-loading .skeleton:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;
	width: 100%;
	height: 100%;
	background-color: #ebf1f8;
	display: block;
	border-radius: 2px;
}

.skt-loading .skeleton:before {
	content: "";
	position: absolute;
	top: 0;
	width: 30%;
	height: 100%;
	background: -webkit-gradient(linear, left top, right top, color-stop(0, hsla(0, 0%, 100%, 0)), color-stop(50%, hsla(0, 0%, 100%, .3)), to(hsla(0, 0%, 100%, 0)));
	background: -o-linear-gradient(left, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0) 100%);
	background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0));
	-webkit-transform: skewX(-45deg);
	-ms-transform: skewX(-45deg);
	transform: skewX(-45deg);
	z-index: 99;
	-webkit-animation: skeleton-ani 5s ease infinite;
	animation: skeleton-ani 5s ease infinite;
	display: block;
}

2.js

setTimeout(() => {
	var $main = document.getElementById('main');
	$main.className = $main.className.replace('skt-loading', '')
}, 2000)

效果：