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