手机端H5加载中效果demo(整理)
Posted 我是开心呀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机端H5加载中效果demo(整理)相关的知识，希望对你有一定的参考价值。
<!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>
74.手机端图片瀑布流的加载代码和效果
http://www.bin012.com/index.php?route=product/product&path=63&product_id=52
以上是关于手机端H5加载中效果demo(整理)的主要内容，如果未能解决你的问题，请参考以下文章