设置页面等待效果

css

* {
    margin: 0;
    padding: 0;
}
.load{
    position: absolute;
    z-index: 9999 !important;
    width: 100%;
    height: 100%;
    background: #1c1e20bf;
}
.loadmain{
    width: 200px;
    height: 60px;
    color: rgb(255, 255, 255);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
}
.loadmain>img{
    width: 32px;
    height: 32px;
}
.loadmain>span{
    font-size: 12px;
    padding-left: 8px;
    width: 100px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

html

  <div class="load">
        <div class="loadmain">
            <img src="data:image/png;base64,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" alt="">
            <span>正在加载中...</span>
        </div>
    </div>

最终效果