自定义加载loading效果（带图片）

青旅半醒 2022-12-06 12:42 235阅读 0赞

`加载中图片，底色为白色(看不到)`  
![在这里插入图片描述][20200913105608103.png_pic_center]

效果如图：  
![在这里插入图片描述][20200913110654656.png_pic_center]

## 使用方法 ##

this.tool.showLoading('加载中', this)
    this.tool.showLoading('合成中', this)
    
    this.tool.hideLoading()

## 引用文件 ##

> 在App.vue中

> 在main.js中

import tools from './tools'
    Vue.prototype.tool = tools

### tools.js ###

export default { 
      //显示加载框---使用方法，例如：this.tool.showLoading('正在加载',this,'1')
      showLoading (message, el, type) { 
        var html = '';
        html += '<i class="mui-spinner mui-spinner-white"></i>';
        html += '<p class="text">' + (message || "数据加载中") + '</p>';
    
        //遮罩层
        var mask = document.getElementsByClassName("mui-show-loading-mask");
        if (mask.length == 0) { 
          mask = document.createElement('div');
          mask.classList.add("mui-show-loading-mask");
          // console.log(type)
          // 自己添加内容...start
          if (type !== '2' && type) { 
            var winHig = document.documentElement.clientHeight;
            if (el.$refs.nav) { 
              var heightNav = el.$refs.nav.offsetHeight;
              var heightFix = el.$refs.fixed.offsetHeight;
              if (type === '1') { 
                var loHig = winHig - heightNav - heightFix + 'px'
              } else { 
                loHig = winHig - heightFix + 'px'
              }
              mask.style.top = heightFix + 'px'
              mask.style.height = loHig
            }
          }
          // 自己添加内容...End
          document.body.appendChild(mask);
          mask.addEventListener("touchmove", function (e) {  e.stopPropagation(); e.preventDefault(); });
        } else { 
          mask[0].classList.remove("mui-show-loading-mask-hidden");
        }
        //加载框
        var toast = document.getElementsByClassName("mui-show-loading");
        if (toast.length == 0) { 
          toast = document.createElement('div');
          toast.classList.add("mui-show-loading");
          toast.classList.add('loading-visible');
          document.body.appendChild(toast);
          toast.innerHTML = html;
          toast.addEventListener("touchmove", function (e) {  e.stopPropagation(); e.preventDefault(); });
        } else { 
          toast[0].innerHTML = html;
          toast[0].classList.add("loading-visible");
        }
      },
    
      //隐藏加载框----使用方法，例如：this.tool.hideLoading();
      hideLoading (callback) { 
        var mask = document.getElementsByClassName("mui-show-loading-mask");
        var toast = document.getElementsByClassName("mui-show-loading");
        if (mask.length > 0) { 
          mask[0].classList.add("mui-show-loading-mask-hidden");
        }
        if (toast.length > 0) { 
          toast[0].classList.remove("loading-visible");
          callback && callback();
        }
      }

### common.css ###

/*----------------mui.showLoading---------------*/
    .mui-show-loading { 
      position: fixed;
      padding: 5px;
      width: 120px;
      min-height: 120px;
      top: 45%;
      left: 50%;
      margin-left: -60px;
      background: rgba(0, 0, 0, 0.6);
      text-align: center;
      border-radius: 5px;
      color: #FFFFFF;
      visibility: hidden;
      margin: 0;
      z-index: 2000;
    
      -webkit-transition-duration: .2s;
      transition-duration: .2s;
      opacity: 0;
      -webkit-transform: scale(0.9) translate(-50%, -50%);
      transform: scale(0.9) translate(-50%, -50%);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }
    
    .mui-show-loading.loading-visible { 
      opacity: 1;
      visibility: visible;
      -webkit-transform: scale(1) translate(-50%, -50%);
      transform: scale(1) translate(-50%, -50%);
    }
    
    .mui-show-loading .mui-spinner { 
      margin-top: 24px;
      width: 36px;
      height: 36px;
    }
    
    .mui-show-loading .text { 
      line-height: 1.6;
      font-family: -apple-system-font, "Helvetica Neue", sans-serif;
      font-size: 14px;
      margin: 10px 0 0;
      color: #fff;
    }
    
    .mui-show-loading-mask { 
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0);
    }
    
    .mui-show-loading-mask-hidden { 
      display: none !important;
    }
    
    /*toast信息提示*/
    .mui-toast-container { 
      top: 5% !important;
      width: auto;
      text-align: center;
    }
    
    .mui-toast-message { 
      background: url(/app/themes/default/images/toast.png) no-repeat center 10px #000;
      background-color: rgba(0, 0, 0, .8);
      color: #fff;
      /* max-width: 90%; */
      display: inline-block;
      width: auto;
      margin: 0 auto;
      /* padding: 70px 5px 10px 5px; */
    }
    
    .mui-spinner-white:after { 
      background-image: url(./assets/loding.png);
    }
    
    .mui-loading .mui-spinner { 
      display: block;
    
      margin: 0 auto;
    }
    
    .mui-spinner { 
      display: inline-block;
    
      width: 24px;
      height: 24px;
    
      -webkit-transform-origin: 50%;
      transform-origin: 50%;
      -webkit-animation: spinner-spin 1s step-end infinite;
      animation: spinner-spin 1s step-end infinite;
    }
    
    .mui-btn .mui-spinner { 
      width: 14px;
      height: 14px;
    
      vertical-align: text-bottom;
    }
    
    .mui-btn-block .mui-spinner { 
      width: 22px;
      height: 22px;
    }
    
    .mui-spinner:after { 
      display: block;
    
      width: 100%;
      height: 100%;
    
      content: '';
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 100%;
    }
    
    
    @-webkit-keyframes spinner-spin { 
      0% { 
        -webkit-transform: rotate(0deg);
      }
    
      8.33333333% { 
        -webkit-transform: rotate(30deg);
      }
    
      16.66666667% { 
        -webkit-transform: rotate(60deg);
      }
    
      25% { 
        -webkit-transform: rotate(90deg);
      }
    
      33.33333333% { 
        -webkit-transform: rotate(120deg);
      }
    
      41.66666667% { 
        -webkit-transform: rotate(150deg);
      }
    
      50% { 
        -webkit-transform: rotate(180deg);
      }
    
      58.33333333% { 
        -webkit-transform: rotate(210deg);
      }
    
      66.66666667% { 
        -webkit-transform: rotate(240deg);
      }
    
      75% { 
        -webkit-transform: rotate(270deg);
      }
    
      83.33333333% { 
        -webkit-transform: rotate(300deg);
      }
    
      91.66666667% { 
        -webkit-transform: rotate(330deg);
      }
    
      100% { 
        -webkit-transform: rotate(360deg);
      }
    }
    
    @keyframes spinner-spin { 
      0% { 
        transform: rotate(0deg);
      }
    
      8.33333333% { 
        transform: rotate(30deg);
      }
    
      16.66666667% { 
        transform: rotate(60deg);
      }
    
      25% { 
        transform: rotate(90deg);
      }
    
      33.33333333% { 
        transform: rotate(120deg);
      }
    
      41.66666667% { 
        transform: rotate(150deg);
      }
    
      50% { 
        transform: rotate(180deg);
      }
    
      58.33333333% { 
        transform: rotate(210deg);
      }
    
      66.66666667% { 
        transform: rotate(240deg);
      }
    
      75% { 
        transform: rotate(270deg);
      }
    
      83.33333333% { 
        transform: rotate(300deg);
      }
    
      91.66666667% { 
        transform: rotate(330deg);
      }
    
      100% { 
        transform: rotate(360deg);
      }
    }

[20200913105608103.png_pic_center]: /images/20221123/9782ba643a034ac2be1033d6ab77bbb8.png
[20200913110654656.png_pic_center]: /images/20221123/1ffc1d05224346a3821f4953de512954.png