.lee-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); } .lees-box { margin-top: -15vh; text-align: center; } .load-txt { font-size: 24 rpx; text-align: center; / / color: #a8a8a8; } .animateTxt { animation: loadTxt 2s infinite; } .loadingview { width: 30 rpx; height: 30 rpx; border-radius: 50%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .spinner2 { width: 50px; height: 60px; text-align: center; font-size: 10px;} /*view {*/ /*/ / background-color: #67CF22;*/ /* height: 100%;*/ /* width: 6px;*/ /* margin-right: 3px;*/ /* display: inline-block;*/ /* -webkit-animation: stretchdelay 1.2s infinite ease-in-out;*/ /* animation: stretchdelay 1.2s infinite ease-in-out;*/ /*}*/ .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } .loading { width: 50 rpx; height: 50 rpx; margin-bottom: 10 rpx; display: inline-block; vertical-align: middle; -webkit-animation: a 1s steps(30) infinite; animation: loading 1s steps(30) infinite; background: transparent url(./images/loading/icon1.png) no-repeat; background-size: 100%; } .rotate2 { background-image: url(./images/loading/icon2.png); } .rotate3 { background-image: url(./images/loading/icon3.png); } .rotate4 { background-image: url(./images/loading/icon4.png); } @keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } .shadow-bg-white { background: rgba(255, 255, 255, 0.7); } @keyframes loadTxt { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } }