<!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>