手机端H5加载中效果demo(整理)-Toy模板网

这篇具有很好参考价值的文章主要介绍了手机端H5加载中效果demo(整理)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

手机端H5加载中效果demo(整理) 文章来源地址https://www.toymoban.com/news/detail-410430.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>手机端H5加载中</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			/* --------- */
			@keyframes van-rotate {
				0% {
					-webkit-transform: rotate(0);
					transform: rotate(0)
				}

				to {
					-webkit-transform: rotate(1turn);
					transform: rotate(1turn)
				}
			}

			.vanLoading,
			.loadingSpan {
				position: relative;
				vertical-align: middle
			}

			.loadingSpan {
				display: inline-block;
				width: .8rem;
				max-width: 100%;
				height: .8rem;
				max-height: 100%;
				-webkit-animation: van-rotate .8s linear infinite;
				animation: van-rotate .8s linear infinite
			}

			.iBox {
				-webkit-animation-timing-function: steps(12);
				animation-timing-function: steps(12)
			}

			.iBox i {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%
			}

			.iBox i:before {
				display: block;
				width: .053333rem;
				height: 25%;
				margin: 0 auto;
				background-color: currentColor;
				border-radius: 40%;
				content: " "
			}

			@-webkit-keyframes van-circular {
				0% {
					stroke-dasharray: 1, 200;
					stroke-dashoffset: 0
				}

				50% {
					stroke-dasharray: 90, 150;
					stroke-dashoffset: -40
				}

				to {
					stroke-dasharray: 90, 150;
					stroke-dashoffset: -120
				}
			}

			@keyframes van-circular {
				0% {
					stroke-dasharray: 1, 200;
					stroke-dashoffset: 0
				}

				50% {
					stroke-dasharray: 90, 150;
					stroke-dashoffset: -40
				}

				to {
					stroke-dasharray: 90, 150;
					stroke-dashoffset: -120
				}
			}

			.iBox i:first-of-type {
				-webkit-transform: rotate(30deg);
				transform: rotate(30deg);
				opacity: 1
			}

			.iBox i:nth-of-type(2) {
				-webkit-transform: rotate(60deg);
				transform: rotate(60deg);
				opacity: .9375
			}

			.iBox i:nth-of-type(3) {
				-webkit-transform: rotate(90deg);
				transform: rotate(90deg);
				opacity: .875
			}

			.iBox i:nth-of-type(4) {
				-webkit-transform: rotate(120deg);
				transform: rotate(120deg);
				opacity: .8125
			}

			.iBox i:nth-of-type(5) {
				-webkit-transform: rotate(150deg);
				transform: rotate(150deg);
				opacity: .75
			}

			.iBox i:nth-of-type(6) {
				-webkit-transform: rotate(180deg);
				transform: rotate(180deg);
				opacity: .6875
			}

			.iBox i:nth-of-type(7) {
				-webkit-transform: rotate(210deg);
				transform: rotate(210deg);
				opacity: .625
			}

			.iBox i:nth-of-type(8) {
				-webkit-transform: rotate(240deg);
				transform: rotate(240deg);
				opacity: .5625
			}

			.iBox i:nth-of-type(9) {
				-webkit-transform: rotate(270deg);
				transform: rotate(270deg);
				opacity: .5
			}

			.iBox i:nth-of-type(10) {
				-webkit-transform: rotate(300deg);
				transform: rotate(300deg);
				opacity: .4375
			}

			.iBox i:nth-of-type(11) {
				-webkit-transform: rotate(330deg);
				transform: rotate(330deg);
				opacity: .375
			}

			.iBox i:nth-of-type(12) {
				-webkit-transform: rotate(1turn);
				transform: rotate(1turn);
				opacity: .3125
			}

			.vanToast {
				position: fixed;
				top: 50%;
				left: 50%;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-webkit-flex-direction: column;
				flex-direction: column;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				box-sizing: content-box;
				width: 2.346667rem;
				max-width: 70%;
				min-height: 2.346667rem;
				padding: .426667rem;
				color: #fff;
				font-size: .373333rem;
				line-height: .533333rem;
				white-space: pre-wrap;
				text-align: center;
				word-break: break-all;
				background-color: rgba(0, 0, 0, .7);
				border-radius: .213333rem;
				-webkit-transform: translate3d(-50%, -50%, 0);
				transform: translate3d(-50%, -50%, 0)
			}
		</style>
		<script>
			var kk = document.documentElement.clientWidth;
			if (kk > 750) {
				kk = 750
			}
			document.documentElement.style.fontSize = kk / 7.5 + "px"
		</script>
	</head>
	<body>
		<div class="vanToast" style="z-index: 2001;">
			<div class="vanLoading"><span
					class="loadingSpan iBox"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
			</div>
			<div class="toastTxt">加载中...</div>
		</div>
	</body>
</html>