javascript自定义加载loading效果

Adelle ·

更新时间:2024-09-20

· 587 次阅读

本文实例为大家分享了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);
 }
}

loading JavaScript

1024 个赞