微信小程序自定义一个全屏的加载中提示框

1、wxml

<view class="mask" hidden="{{flag}}">
  <view class="maskContent">
    <view class='loadContent'>
        <image class='closeImg_image' src='/images/loading.png'></image>
    </view> 
    <view class='loadtext'>视频上传中,请稍后...</view>
  </view>
</view>

2、wxss

/* 设置背景遮罩层样式 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999 !important;
}

/* 设置遮罩内容样式 */

.maskContent {
  width: 50%;
  background: #fff;
  border-radius: 5px;
  padding: 30rpx;
  text-align: center;
}

//是图片可以旋转
.closeImg_image {
  width: 80rpx;
  height: 80rpx;
  margin: 10rpx;
  transform: rotate(360deg);
  -ms-transform: rotate(360deg); /* IE 9 */
  -moz-transform: rotate(360deg); /* Firefox */
  -webkit-transform: rotate(360deg); /* Safari 和 Chrome */
  -o-transform: rotate(360deg); /* Opera */
  animation: rotation 3s linear infinite;
  -moz-animation: rotation 3s linear infinite;
  -webkit-animation: rotation 3s linear infinite;
  -o-animation: rotation 3s linear infinite;
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

.loadtext {
  font-size: 32rpx;
}

3、js  可以自定义显示位置，我这里是视频上传时显示提示框，视频上传完成关闭提示框

Page({
    data: {
        flag: true
    },
    showMask: function () {
        this.setData({ flag: false })
   },
   closeMask: function () {
        this.setData({ flag: true })
   },
addVideoTap: function () {
    var that = this
    wx.chooseVideo({
      sourceType: ['camera'],
      compressed:false,
      camera: 'back',
      success: function (res) {
        console.log(res);
        that.setData({
          videoUrl: res.tempFilePath
        });
        that.showMask();//视频上传中，显示提示框
          wx.uploadFile({
             url: romoteurl + '/upload', //开发者服务器的 url
            filePath: res.tempFilePath, // 要上传文件资源的路径 String类型！！！
            name: 'file', // 文件对应的 key ,(后台接口规定的关于图片的请求参数)
            header: {
              'content-type': 'multipart/form-data'
            }, // 设置请求的 header
            formData: {

            }, // HTTP 请求中其他额外的参数
            success: function (res) {
              that.closeMask(); //视频上传成功关闭提示框
            },
            fail: function (res) {
              console.log("图片上传失败" + res);
            }
          })      
      }
    })
  },
})