@import "../area/index.wxss"; .van-loading { z-index: 0; line-height: 0; vertical-align: middle; } .van-loading,.van-loading__spinner { position: relative; display: inline-block; } .van-loading__spinner { z-index: -1; width: 100%; height: 100%; box-sizing: border-box; animation: van-rotate .8s linear infinite; } .van-loading__spinner--spinner { animation-timing-function: steps(12); } .van-loading__spinner--circular { border-radius: 100%; border: 1px solid transparent; border-top-color: initial; } .van-loading__dot { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } .van-loading__dot:before { width: 2px; height: 25%; content: " "; display: block; margin: 0 auto; border-radius: 40%; background-color: currentColor; } .van-loading__dot:first-of-type { opacity: 1; transform: rotate(30deg); } .van-loading__dot:nth-of-type(2) { opacity: .9375; transform: rotate(60deg); } .van-loading__dot:nth-of-type(3) { opacity: .875; transform: rotate(90deg); } .van-loading__dot:nth-of-type(4) { opacity: .8125; transform: rotate(120deg); } .van-loading__dot:nth-of-type(5) { opacity: .75; transform: rotate(150deg); } .van-loading__dot:nth-of-type(6) { opacity: .6875; transform: rotate(180deg); } .van-loading__dot:nth-of-type(7) { opacity: .625; transform: rotate(210deg); } .van-loading__dot:nth-of-type(8) { opacity: .5625; transform: rotate(240deg); } .van-loading__dot:nth-of-type(9) { opacity: .5; transform: rotate(270deg); } .van-loading__dot:nth-of-type(10) { opacity: .4375; transform: rotate(300deg); } .van-loading__dot:nth-of-type(11) { opacity: .375; transform: rotate(330deg); } .van-loading__dot:nth-of-type(12) { opacity: .3125; transform: rotate(1turn); } @-webkit-keyframes van-rotate { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } @keyframes van-rotate { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } }