javascript自定义加载loading效果

本文实例为大家分享了javascript自定义加载loading效果的具体代码，供大家参考，具体内容如下

加载中图片，底色为白色(看不到)

效果如图：

使用方法

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

this.tool.hideLoading()

引用文件

在App.vue中

<style scoped>
@import './common.css';
</style>

在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);
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/weixin_44666644/article/details/108560051