App端或H5页面常用提示和加载效果

抄袭自拼多多

<style>
.pin-toast-container {
    display: block;
    position: fixed;
    width: 100%;
    max-width: 768px;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 999999999;
    text-align: center;
    pointer-events: none;
}
.pin-toast {
    display: block;
    position: relative;
    bottom: 32px;
    max-width: 2.5rem;
    min-width: 1rem;
    height: auto;
    margin: 0 auto;
    background-color: rgba(0,0,0,.8);
    color: #f0f0f0;
    font-size: .16rem;
    line-height: 1.5;
    padding: .12rem .14rem;
    text-align: center;
    border-radius: .06rem;
}
</style>
<div class="pin-toast-container">
    <div class="pin-toast"></div>
</div>

<div>
<style>
.pin-spinner-2 {
    display: none;
    position: fixed;
    width: .66rem;
    height: .66rem;
    top: 35%;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 999999999;
}

.ps-inner-box {
    width: 100%;
    height: 100%;
}

.ps-rotate-img {
    width: .25rem;
    height: .25rem;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    animation: rotateImg 2.5s linear infinite;
    -webkit-animation: rotateImg 2.5s linear infinite;
    z-index: 9999999999;
    position: absolute;
}

.ps-rotate-msg {
    width: 100%;
    font-size: .15rem;
    text-align: center;
    color: #fff;
    position: relative;
    bottom: 0px;
    display: none;
}

.ps-background {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    background-color: #000;
    border-radius: .09rem;
}

.pin-spinner-2 {
    display: block;
    top: 50%;
    margin-top: -.66rem;
    width: .66rem;
    height: .66rem;
}

.pin-spinner-2.hasMessageText {
    margin-top: -.82rem;
    width: 1rem;
    height: 1rem;
}

.hasMessageText .ps-rotate-img {
    bottom: .43rem;
    top: .18rem;
    width: .36rem;
    height: .36rem;
}

.hasMessageText .ps-rotate-msg {
    display: block;
    bottom: .32rem;
}


@keyframes rotateImg {
    0% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(180deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

@-webkit-keyframes rotateImg {
    0% {
        -webkit-transform: rotateZ(0deg);
    }
    50% {
        -webkit-transform: rotateZ(180deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
    }
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .pin-spinner-2 {
        margin-top: -.82rem;
    }
}
</style>
<div class="mask" style="position:fixed;top:0;left:0;z-index:99998;width:100%;height:100%;opacity:0.4;overflow:hidden;"></div>
<div id="pin-spinner" class="pin-spinner-2" style="/* display: none; */">
    <div id="ps-background" class="ps-background" style="display: block;"></div>
    <div class="ps-inner-box">
        <img id="imgInit" class="ps-rotate-img" src="data:image/png;base64,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">
    </div>
    <div id="msgInit" class="ps-rotate-msg"></div>

</div>
</div>