javascript自定义加载loading效果


Posted in Javascript onSeptember 15, 2020

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
图解JS原型和原型链实现原理
Sep 15 #Javascript
vue实现简单全选和反选功能
Sep 15 #Javascript
vscode 调试 node.js的方法步骤
Sep 15 #Javascript
js实现特别简单的钟表效果
Sep 14 #Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 #Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 #Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 #Javascript
You might like
php 代码优化之经典示例
2011/03/24 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
浅谈js中的this问题
2017/08/31 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
JS代码触发事件代码实例
2020/01/02 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
Python打印斐波拉契数列实例
2015/07/07 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
vivo智能手机官方商城:vivo
2016/09/22 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
什么是数据抽象
2016/11/26 面试题
大学生志愿者感言
2014/01/15 职场文书
小学生新学期寄语
2014/01/19 职场文书
高一政治教学反思
2014/01/28 职场文书
大家访活动实施方案
2014/03/10 职场文书
工商管理专业自荐信
2014/06/03 职场文书
毕业生面试求职信
2014/06/23 职场文书
商务英语求职信范文
2015/03/19 职场文书
实习单位推荐信
2015/03/27 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书