mall_client/zyhs_app_java/zyhs3_uniapp/static/scss/loading.css

.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);
    }
}