css 挡遮层 半透明 实现 loading + 系统logo （可运用于Web + 微信小程序）

<style lang="scss" scoped>

@-webkit-keyframes img-loaddata {
0% {
    -webkit-transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
}
}
@keyframes img-loaddata {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
}
@-webkit-keyframes spin-loaddata {
0% {
    -webkit-transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
}
}
@keyframes spin-loaddata {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
@-webkit-keyframes spin-reverse-loaddata {
0% {
    -webkit-transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(0deg);
}
}
@keyframes spin-reverse-loaddata {
0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
}
.loader-wrapper.loaddata {
  position: absolute;
  width: 100%;
  height: 100%;top:0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5); /* 背景颜色为黑色，透明度为50% */
  z-index: 1000; /* 确保遮层在其他内容之上 */
}
.loader.loaddata {
  display: flex;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #4B98FE;
  -webkit-animation: spin-loaddata 1.7s linear infinite;
          animation: spin-loaddata 1.7s linear infinite;
  z-index: 11;
}
.loader.loaddata:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #FFAC00;
  -webkit-animation: spin-reverse-loaddata 5.6s linear infinite;
          animation: spin-reverse-loaddata 5.6s linear infinite;
}
.loader.loaddata:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #00D05E;
  -webkit-animation: spin-loaddata 2.3s linear infinite;
          animation: spin-loaddata 2.3s linear infinite;
}
.logo-loading.loaddata {
  font-size: 120rpx;
  color: #01BEFF;
  margin: auto;
  align-items: center;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  -webkit-animation: img-loaddata 1.7s linear infinite;
          animation: img-loaddata 1.7s linear infinite;
}

.loading-text{
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    color: #c8c8c8;
    font-size: 19px;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 50%;
}
 
 
 
.tn-text-shadow-aquablue {
    text-shadow: 6rpx 6rpx 8rpx #D7DAFF;
}    
</style>

 

<view class="template-loading loaddata">
            <view class="loader-wrapper loaddata">
                <view class="loader loaddata">
                    <!-- <view class="logo-loading tn-icon-logo-tuniao tn-text-shadow-aquablue"></view> -->
                    <image style="width: 64px;height: 64px;" class="logo-loading tn-text-shadow-aquablue loaddata" 
                    src="/static/images/home/logo.png" mode="aspectFill"></image>
                </view>
                <view class="loading-text" >
                  <text style="font-size: 20px;color: #fff;">加载中...</text
                  >
                </view>
            </view>
        </view>