移动端loading效果实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38147456/article/details/84134880

css:

.my-toast {
	position: fixed;
	z-index: 5000;
	width: 7.6em;
	min-height: 7.6em;
	top: 180px;
	left: 50%;
	margin-left: -3.8em;
	background: hsla(0, 0%, 7%, .7);
	text-align: center;
	border-radius: 5px;
	color: #fff;

	-webkit-transition-duration: .2s;
	transition-duration: .2s;
	opacity: 1;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}
.my-icon_toast.my-loading {
	margin: 30px 0 0;
	width: 38px;
	height: 38px;
	vertical-align: baseline;
}
.my-icon_toast {
	font-size: 55px;
	color: white;
	margin-bottom: 6px;
}
@-webkit-keyframes e {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

@keyframes e {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}
.my-loading {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	-webkit-animation: e 1s steps(12) infinite;
	animation: e 1s steps(12) infinite;
	background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;
	background-size: 100%
}

js:(记得引入jQuery)

function showMyLoading(){
	$('body').append(`<div class="my-toast my_loading_toast my-toast--visible"><div class="my_loading"><i class="my-loading my-icon_toast"></i></div><p class="my-toast_content">数据加载中</p></div>`);
}
function hideMyLoading(){
	$('.my-toast').remove();
}
$(function(){
	showMyLoading();
	setTimeOut(function(){
		hideMyLoading();
	},1500)
})